对齐问题

这是我举的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在一个单一的线，以及如何使复选框和相应的文本中也排列对齐一条线。

来源

2013-01-24 iJade

我已删除不必要的代码以进行说明。

首先，使用两个列表：

<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-24 04:47:52

这里的小提琴：http://jsfiddle.net/vG8tW/2/ –

通过对齐复选框和文本我的意思....在第一行一个复选框和相应的文本，在下一行另一个巢穴。它已经在我的代码中，但如果你注意到文本是在复选框 – iJade

以上一点好吧，我已经编辑了复选框的对齐方式。链接：http：//jsfiddle.net/vG8tW/5/ –

-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-24 04:52:49 Asmita

您正在使用内联css并用float解决它，当需要的只是将列表的内部内容定义为内联。你也在列表中使用DIV。 –

不改变你的结构，这里是一个将解决您的问题的CSS，

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

jsFiddle link

更新：

您需要使用<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 FIDDLE LINK

来源

2013-01-24 04:59:07

复选框和相应的文本不对齐 – iJade

@jade我已经更新了我的答案，请看看。 –

删除

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

for None |所有

和复选框使用

<li><input type="checkbox">&nbsp;ABC 
<input type="checkbox">&nbsp;LPO 
<input type="checkbox">&nbsp;MNJ</li>

来源

2013-01-24 05:04:53

这样写：

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

入住这http://jsfiddle.net/vG8tW/6/

来源

2013-01-24 05:36:15 sandeep

-1

添加以下样式

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

jsfiddle

来源

2013-01-24 05:51:34 aju

回答

相关问题