1

テキストボックスを揃えるためのコードを作成するタスクがあります。メインディビジョンがあります。その中にサブディビジョンがたくさんあります。これらのサブdivは適切に配置されていません。サブdivを編集せずにjqueryを使用してこれらの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

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 に答える
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 に答える
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 に答える
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 に答える