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在单行中对齐以及如何使复选框和相应的文本也在单行中对齐。

4

6 回答 6

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

出于澄清目的，我删除了不必要的代码。

首先，使用两个列表：

<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

像这样写：

.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 回答