css - 向左浮动 - 行尾的额外空间

Question

我有 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;
    }

http://jsfiddle.net/UH4VH/4/

请帮我解决这个问题。

Answer 1

这是因为您混合了像素值和百分比值。

您已为 label 设置了 min-width:150px 并为外部 div 设置了 90%。

以百分比形式设置 label 的 max-width 或以百分比形式设置外部 div 的 max-width。

Fiddle here.

Output here.

不要使用内联样式。这是一种非常糟糕的做法。