2

これが私のブートストラップhtmlコードです

 <div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          
          <li class="nav-header">Practice</li>
          <li align="right"><a href="#" onclick='Show();'>None</a>&nbsp;|&nbsp;<a href="#" onclick='Show();'>All</a></li>
          <li><input type="checkbox"/>&nbsp;ABC</li>
          <li><input type="checkbox"/>&nbsp;LPO</li>
          <li><input type="checkbox"/>&nbsp;MNJ</li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->

そして、ここにjsfiddleがあります

None | Allを 1 行に揃える方法と、チェックボックスと対応するテキストも 1 行に揃える方法。

4

6 に答える 6

0

明確にするために不要なコードを削除しました。

まず、2 つのリストを使用します。

<ul>
    <li class="nav-header">Practice</li>
    <li align="right"><a href="#" onclick='Show();'>None</a>&nbsp;|&nbsp;<a href="#" onclick='Show();'>All</a></li>
</ul>
<ul>
    <li><input type="checkbox"/>&nbsp;ABC</li>
    <li><input type="checkbox"/>&nbsp;LPO</li>
    <li><input type="checkbox"/>&nbsp;MNJ</li>
</ul>

次に、その CSS を使用します。

ul li { display: inline; }

チェックボックスをテキストに揃えるには、これを CSS に追加します。

ul li input { position: relative; top: -3px; }

ページに最適な属性に調整topしてください。

于 2013-01-24T04:47:52.087 に答える
0

削除する

.nav > li > a {
    display: block;
}

なし | 全て

およびチェックボックス用

<li><input type="checkbox">&nbsp;ABC
<input type="checkbox">&nbsp;LPO
<input type="checkbox">&nbsp;MNJ</li>
于 2013-01-24T05:04:53.523 に答える
0

構造を変更せずに、問題を解決する css を次に示します。

div{
  float: left;
}
li{
  float: left;
    clear: left;
}
li > a{
  float: left;
}
li > a:last-child{
 float: right;
}

jsFiddle リンク

アップデート：

テキストを でラップする必要がある<span>ため、html は次のようになります。

<li ><input type="checkbox"/><span>ABC</span></li>
<li><input type="checkbox"/><span>LPO</span></li>
<li><input type="checkbox"/><span>MNJ</span></li>

そしてcss、

li > span{
    float: right;
    margin: 4px;
}

JSフィドルリンク

于 2013-01-24T04:59:07.277 に答える
0

次のように書きます。

.nav-list > li[align="right"] > a{
    display:inline;
    margin:0;
}
.nav-list > li input{
   vertical-align:top; 
}

これをチェックしてくださいhttp://jsfiddle.net/vG8tW/6/

于 2013-01-24T05:36:15.373 に答える
-1

次のスタイルを追加

.nav > li{
display:inline;
}
.nav > li.nav-header,.nav > li[align]{
 display:block;   
}

jsfiddle

于 2013-01-24T05:51:34.583 に答える
-1

次のコードを使用

          <li class="nav-header">Practice</li>
          <li align="right">
              <a href="#" style="float:left;margin-left:70px;"  onclick='Show();'>None</a>
              &nbsp;|&nbsp;
              <a href="#"   style="float:right;" onclick='Show();'>All</a>
            </li>
            <div style="clear:both;">
          <li><input type="checkbox"/>&nbsp;ABC</li>
          <li><input type="checkbox"/>&nbsp;LPO</li>
          <li><input type="checkbox"/>&nbsp;MNJ</li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->
于 2013-01-24T04:52:49.520 に答える