Question

我有一项任务是创建用于对齐文本框的代码。我有一个主要的div.Inside我有这么多的sub div。这些子div没有正确对齐。我想通过使用jquery对齐这些div而不编辑子div。我怎么能这样做？我的代码是

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

上查看我的代码

Answer 1

一切都应该用适当的工具完成。只需使用超级简单的CSS即可完成任务：

#maindiv > div {
    padding-bottom: 10px;
}
#maindiv > div > b {
    width: 80px;
    display: inline-block;
}

http://jsfiddle.net/CG6Vw/1/

Answer 2

使用min-width标记

#maindiv div{
    display:inline-block;
    padding:0 6px 8px 0
}
#maindiv b{
    display:inline-block;
    min-width:80px; 
    width:auto
}

DEMO

Answer 3

如果按照您的要求似乎没问题，请试试这个 -

Tabber

Answer 4

如果你不想使用css，你也可以使用jQuery

$(function() {
    $("#tabs").tabs();
    $('#maindiv > div > b').each(function(){
         $(this).attr('style','width: 60px; display: inline-block;');
    });
});

但是你仍然在使用风格：）

Answer 5

你想要这样的东西：JSFiddle Demo

<强> HTML

<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="" class="field" />
        </div>
        <div>
            <label>Age:</label>
            <input type="text" name="name" value="" class="field" />
        </div>
        <div>
            <label>Email:</label>
            <input type="text" name="name" value="" class="field" />
        </div>
        <div>
            <label>Phone:</label>
            <input type="text" name="name" value="" class="field" />
        </div>
    </div>  
  </div>
  <div id="tabs-2">
    <p>Vipin</p>
  </div>
</div>

<强> CSS

label, input[type="text"]{
    float:left;
    display:block;
}
label
{
    margin-right: 5px;
}
.field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
}

<强> jquery的

$(function() {
  $("#tabs").tabs();
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();    
    });
    $("label").width(max);
});

如何以通用样式排列文本框

5 个答案: