我有 4 个 div 和一个主 div。每个 div 都在新行上。我想将两个 div 连接在一起以使用最大空间。 我的代码是
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$("#tabs").tabs();
$('#maindiv > div ').each(function(){
$(this).attr('style','padding-bottom: 10px;');
});
$('#maindiv > div > b').each(function(){
$(this).attr('style','width: 80px; display: inline-block;');
});
});
});//]]>
</script>
<div id="maindiv">
<div>
<b>Name:</b>
<input type="text" name="name" value=""/>
</div>
<div>
<b>Age:</b>
<input type="text" name="age" value=""/>
</div>
<div>
<b>Email:</b>
<input type="text" name="email" value=""/>
</div>
<div>
<b>Phone:</b>
<input type="text" name="phone" value=""/>
</div>
<div>
<b>City:</b>
<input type="text" name="city" value=""/>
</div>
<div>
<input type="submit" name="submit" value="submit"/>
</div>
</div>
你可以从 http://jsfiddle.net/CG6Vw/1/ 看到我的代码 我怎样才能将它结合起来?
最佳答案
添加display:inline-block
Div 默认是 block 元素,因此它占据了行的整个空间,将其设置为 inline-block
或 inline
以根据内容限制其宽度可以在里面找到。
#maindiv > div {
padding-bottom: 10px;
display:inline-block
}
<强> DEMO
关于javascript - 如何将两个文本框合并成一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15222133/