0

我有一个包含多个输入的 Web 表单,其中一些位于另一个旁边,而另一些则位于新行上。示例如下:

<h3>Max and Min Value</h3>
Max: <input name=max_value type=number>* Min: <input name=min_value type=number>

<h3>Overall Value</h3>
Overall: <input name=overall type=number>

如果浏览器窗口足够宽,我想定位max_value并且min_value它们在同一行,否则在*位置处换行。我知道我可以通过将它们包含在包装元素中并使用它们float:left来设置样式来完成工作。但这会影响整个文档的流程,除非我引入额外的间隔元素。

是否有另一种方法可以在不影响文档流的情况下创建可选换行符?

4

5 回答 5

2

将您的输入包装Min在 div 中并指定display: inline-block应该可以解决问题:

<h3>Max and Min Value</h3> 
Max: <input name=max_value type=number>* <div style="display: inline-block">Min: <input name=min_value type=number></div>

<h3>Overall Value</h3> 
Overall: <input name=overall type=number> 
于 2012-07-19T10:36:29.313 回答
1

您可以使用white-space: nowrap将输入和标签保持在一起:

<html>
<head>
  <style type="text/css">
    label { white-space: nowrap; }
  </style>
</head>
<body>
  <h3>Max and Min Value</h3>
  <label>Max: <input name=max_value type=number>*</label> <label>Min: <input name=min_value type=number></label>
</body>
</html>
于 2012-07-19T10:41:15.817 回答
1

您可以使用 css 禁止换行:

.nobr  { white-space:nowrap; }

所以你得到的代码看起来像:

<h3>Max and Min Value</h3>
<span class="nobr">Max: <input name=max_value type=number></span> <span class="nobr">Min: <input name=min_value type=number></span>

<h3>Overall Value</h3>
Overall: <input name=overall type=number>
于 2012-07-19T10:42:22.340 回答
0

我认为您唯一需要做的就是在将新的包装器元素浮动到左侧之后clear: left(或both<h3>标记。这应该够了吧。

于 2012-07-19T10:43:28.580 回答
0
<style type='text/css'>
.block
{
display:inline-block;
padding-left:5px;
margin:5px 0px;
}
</style>

<h3>Max and Min Value</h3>
<div class='block'>Max: <input name=max_value type=number></div><div class='block'> Min: <input name=min_value type=number></div>


<h3>Overall Value</h3>
Overall: <input name=overall type=number>

希望这对你有用。

于 2012-07-19T10:44:40.883 回答