这是我的 Bootstrap 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> | <a href="#" onclick='Show();'>All</a></li>
<li><input type="checkbox"/> ABC</li>
<li><input type="checkbox"/> LPO</li>
<li><input type="checkbox"/> MNJ</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
这里是 jsfiddle
如何获取None |所有在一行中对齐以及如何使复选框和相应的文本也在一行中对齐。
最佳答案
为了清楚起见，我删除了不必要的代码。
首先，使用两个列表:
<ul>
<li class="nav-header">Practice</li>
<li align="right"><a href="#" onclick='Show();'>None</a> | <a href="#" onclick='Show();'>All</a></li>
</ul>
<ul>
<li><input type="checkbox"/> ABC</li>
<li><input type="checkbox"/> LPO</li>
<li><input type="checkbox"/> MNJ</li>
</ul>
然后使用该 CSS:
ul li { display: inline; }
要使复选框与其文本对齐，请将其添加到您的 CSS
ul li input { position: relative; top: -3px; }
将 top 属性调整为最适合您页面的属性。
关于html - 对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14494110/