如何以通用样式排列文本框 [英] How to arrange the textboxes in a common style
本文介绍了如何以通用样式排列文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个任务来创建用于对齐文本框的代码.我有一个主div，里面有很多子div.这些子div的对齐方式不正确.我想通过使用jQuery来对齐这些div，而不编辑子div.我该怎么做? 我的代码是
I have got a task to create the code for aligning the text boxes. I have a main div.Inside that I have so many sub div. These sub div is not properly aligned.I want to align these div by using jquery without editing the sub div.How can I do this? My code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Jquery-Align</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$("#tabs").tabs();
});
});//]]>
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nithin</a> </li>
<li><a href="#tabs-2">Vipin</a></li>
</ul>
<div id="tabs-1">
<div id="maindiv">
<div>
<label>Name:</label>
<input type="text" name="name" value=""/>
</div>
<div>
<label>Age:</label>
<input type="text" name="name" value=""/>
</div>
<div>
<label>Email:</label>
<input type="text" name="name" value=""/>
</div>
<div>
<label>Phone:</label>
<input type="text" name="name" value=""/>
</div>
</div>
</div>
<div id="tabs-2">
<p>Vipin</p>
</div>
</div>
</body>
</html>
您可以在 http://jsfiddle.net/CG6Vw/
推荐答案
使用min-width进行标记
#maindiv div{
display:inline-block;
padding:0 6px 8px 0
}
#maindiv b{
display:inline-block;
min-width:80px;
width:auto
}
这篇关于如何以通用样式排列文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
