1

我的任务是创建用于对齐文本框的代码。我有一个主 div。里面有很多子 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/上查看我的代码

4

5 回答 5

2

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

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

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

于 2013-03-05T09:24:15.063 回答
2

用于min-width标记

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

演示

于 2013-03-05T11:16:33.340 回答
0

如果按照您的要求看起来没问题，试试这个——

泰伯

于 2013-03-05T09:21:46.320 回答
0

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

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

但是你仍然在使用风格:)

于 2013-03-05T09:32:44.160 回答
0

你想要这样的东西吗兄弟：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);
});
于 2013-03-05T09:56:27.227 回答