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控件是＆lt; = 4，则按钮正确对齐

可以使用以下css进行修复。但它并不适用于所有决议

    div:nth-child(4n+1)
    {
        clear:left;
    }

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

请帮我解决这个问题。

Answer 1

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

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

设置max-width的{{1}}百分比或设置外部div的label百分比。

Fiddle here.

Output here.

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

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

1 个答案: