我有 div
,左边是输入控件,右边是按钮。输入控制计数可能会根据要求而变化。
问题是,当 i/p 控件大于 4(在 1600X900 分辨率下)时,控件未正确对齐,即控件在两行中对齐,行尾有一些额外的空间。
HTML
<div id ="Container">
<div style="float: left;display: inline;max-width: 90%;">
<div class =" divStyle">
<label for ="One" >One:</label>
<input id = "One" type ="text" />
</div>
<div class =" divStyle">
<label for ="Two">Two:</label>
<input id = "Two" type ="text" />
</div>
<div class =" divStyle">
<label for ="Three">Three:</label>
<input id = "Three" type ="text" />
</div>
<div class =" divStyle">
<label for ="Four">Four:</label>
<input id = "Four" type ="text" />
</div>
<div class =" divStyle">
<label for ="Five" >Five:</label>
<input id = "Five" type ="text" />
</div>
<div class =" divStyle">
<label for ="Six">Six:</label>
<input id = "Six" type ="text" />
</div>
<div class =" divStyle">
<label for ="Seven" >Seven:</label>
<input id = "Seven" type ="text" />
</div>
<div class =" divStyle">
<label for ="Eight">Eight:</label>
<input id = "Eight" type ="text" />
</div>
</div>
<div style="float: left;display: inline;position: relative;" >
<button type ="button">Hello World</button>
</div>
CSS
label
{
float:left;
min-width: 150px;
font-weight:bold;
}
input
{
margin-right:10px;
}
.divStyle
{
float:left;
display:inline;
min-height:30px;
}
图片
但是如果 I/P 控件 <=4 按钮正确对齐
它可以用下面的 css 修复。但它不适用于所有分辨率
div:nth-child(4n+1)
{
clear:left;
}
请帮我解决这个问题。
最佳答案
这是因为您混合了像素值和百分比值。
您已为 label
设置了 min-width:150px
并为外部 div 设置了 90%
。
以百分比形式设置 label
的 max-width
或以百分比形式设置外部 div 的 max-width
。
不要使用内联样式。这是一种非常糟糕的做法。
关于css - 向左浮动 - 行尾的额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19945648/