我有这个代码: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;
}
最佳答案
看到你的代码我可以说你正在使用 <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>
实现它标签
代码在这里!
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; }
关于css - 带有表单的父子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9095927/