css - 带有表单的父子 div

Question

我有这个代码:http://jsfiddle.net/bUPWS/1/但是#div2 溢出了#div1。如何将溢出的输入放在其他输入旁边？

    <div id="div1">
    <div id="div2">
        <form>
            <input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/>
        </form>
    </div>
</div>

#div1 {
    width:400px;
    height:100px;
    border:1px solid red;
}

Answer 1

看到你的代码我可以说你正在使用 <br />标签，因此无法将您的输入彼此相邻。只需删除每个 <br/>您的所有输入都将正确对齐。

另外你可以使用min-height对于你的父 div div1

#div1 {
    width:400px;
    min-height:100px;
    border:1px solid red;
}

#div2 input {display:inline; }

如果您的输入增加超过 100px height 的限制你的父 div 将根据你的 div2 中的输入调整高度 block

编辑: 但是，为了解释我在下面的评论，我已经更新了您的 fiddle 示例，您可以检查我们如何使用 <ul> <li></li></ul> 实现它标签

Fiddle example

代码在这里!

HTML

<div id="div1">
    <div id="div2">
        <form>
            <ul>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
           </ul>
            <ul>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
            </ul>

        </form>
    </div>
</div>

CSS

#div1 {
    width:800px;
    min-height:100px;
    border:1px solid red;
}
*{padding:0; margin:0}
#div2 ul{float:left; padding-left:10px; }