如何将两个文本框组合成一行
How to combine two text boxes in a row
我有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是默认的块元素,所以它占据了行的整个空间,将其设置为inline-block
或inline
以限制其宽度,根据其中可用的内容。
#maindiv > div {
padding-bottom: 10px;
display:inline-block
}
相关文章:
- 根据id将json数组组合为一个json数组
- 接受不在列表中的值-引导组合框
- 拆分文本以每隔n个字符添加一行新行,并注意空格
- 动态插入的表:JQuery未检测到最后一行
- 从客户端获取修改后的对象,并将其与服务器上的原始对象组合
- 组合两个javascript函数
- Telerik rad组合框多列数据绑定
- 在终端中运行 JavaScript 时(使用 rhino),如何使用 print() 函数在一行中打印
- 如何在Angular UI网格中选择下一行
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 组合 2 个 JavaScript .scroll 函数
- 如何使用jquery组合两个数组
- onChange不足以从Dojo组合框触发查询
- 组合承诺和非承诺值
- 所有控件的组合框
- 在D3中组合多个事件
- 在extjs网格中添加只有一行的组合框
- 如何保留组合框选定的背景颜色,内部网格面板一旦移动到下一行.或者可以说集中注意力
- 如何将两个文本框组合成一行
- 变量组合在一行 indexOf 方法(Eloquent Javascript)中