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 [{1}}

div1

如果您的输入增加超过#div1 { width:400px; min-height:100px; border:1px solid red; } #div2 input {display:inline; }的限制，则您的父div将根据100px height块内的输入调整高度

编辑但是，为了解释我在下面的评论，我已经更新了您的小提琴示例，您可以查看我们如何使用div2代码实现它

Fiddle example

代码如果在这里！

HTML

<ul> <li></li></ul>

CSS

<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>

Answer 2

我不确定这是否是您要找的，但您可以设置overflow：auto为div 1并设置float：left，用于输入。小提琴：http://jsfiddle.net/bUPWS/28/

Answer 3

尝试使用fieldset而不是div。见：http://www.w3schools.com/tags/tag_fieldset.asp

父母和孩子div与形式

3 个答案: