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

发生这种情况是因为您正在混合像素值和百分比值。

您已经设置min-width:150px了 forlabel和90%for 外部 div。

要么以百分比max-width为单位，要么以百分比为单位的外部 div 集。labelmax-width

在这里拉小提琴。

在这里输出。

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