Question

我有一个包含多个输入的网络表单，其中一些输入位于另一个输入旁边，而其他输入位于新行。示例如下：

<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来设置两者来完成工作。但这会影响整个文档的流程，除非我引入额外的间隔元素。

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

Answer 1

将您的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>

Answer 2

您可以使用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>

Answer 3

你可以用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>

Answer 4

我认为您需要做的唯一事情是，将新的包装器元素向左移动到clear: left（或both）<h3>标签。这应该可以解决问题。

Answer 5

<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>

希望这适合你。

有没有办法在不使用float的情况下创建可选的换行符？

5 个答案: