Question

这是一个示例标记：

<ul id="subnav" class="right">
    <li><a href="#">Email</a></li>
    <li><a href="#">Note</a></li>
    <li><a href="#">Test</a></li>
</ul>

我如何获得＆＃34;测试＆＃34;对齐subnav的右边和左边的其他项目？我是否需要另外一个UL并将其与右侧对齐并将测试放入其中，或者我是否只将测试对齐到右侧？

这是一个演示：http://jsfiddle.net/RbHN5/2/

如果有人能告诉我正确的实施，我会很感激

Answer 1

您可以使用float: right将last-child单独对齐。

#subnav li:last-child{
    float: right;
    margin-right: 40px; /* Optional setting dependent on other styles */
}

Demo

注意：仅当相关元素为last-child时才有效。如果有多个元素，则可以使用相同的浮点设置，但使用类作为选择器（如.right）而不是last-child。

Updated Demo - 使用right类的多个右对齐元素。

Answer 2

你可以这样做

.test
 {
float:right;
margin-right:40px !important;

 }

<li  class="test"><a href="#">Test</a></li>

http://jsfiddle.net/RbHN5/13/

Answer 3

你可以做this

<强> HTML：

<ul id="subnav" class="right">
    <li><a href="#">Email</a></li>
    <li><a href="#">Note</a></li>
    <li><a href="#">Test</a></li>
</ul>

<强> CSS：

*{margin:0;padding:0;border:none;list-style:none;}
.test{float:right;margin: 20px;}
#subnav {margin: 20px; font-family: Arial;font-size: 13px;}
#subnav li{float:left;border-radius: 4px;line-height: 40px; height: 40px; background-color: white; margin-right: 10px; padding-left: 10px; padding-right: 10px;}
#subnav li:last-child{float:right;}
body {background: pink;}

OR

This

<div class="wrap">
    <ul id="subnav" class="right">
        <li><a href="#">Email</a></li>
        <li><a href="#">Note</a></li>    
    </ul>
    <div class="test">
        <a href="#">Test</a>
    </div>
</div>

<强> CSS：

*{padding:0;margin:0;list-style:none;}
.wrap{position:relative;}
#subnav {margin: 20px; font-family: Arial;
font-size: 13px; width: 100%}
#subnav li{display:inline-block;}
#subnav li, .test{border-radius: 4px;line-height: 40px; height: 40px; background-color: white; margin-right: 10px; padding-left: 10px; padding-right: 10px;}
.test{position:absolute;top:0;right:0;}
body {background: pink;}

Answer 4

This is how I would write it:
On the html file,

<ul id="subnav" >
    <li class="left"><a href="#">Email</a></li>
    <li class="left"><a href="#">Note</a></li>
    <li class="right"><a href="#">Test</a></li>
</ul>

And on the CSS file,

#subnav{
    list-style:none;
    display:inline-block;
    color:blue;
    background:silver;
    padding:5px;
}
.right{
    float:right;
    margin-left:40px;
}
.left{
    float:left;
}

列表导航 - 左右对齐

4 个答案: