使一些菜单链接向右浮动，另一些向左浮动。

Question

我有这个HTML代码和CSS的水平菜单。它显示从左到右浮动到页面左侧的链接(框)。

使链接(框)中的一个显示到页面右侧的最佳方法是什么？

我尝试使用浮动右，下面的CSS复制为导航-右，并改变了HTML的需要，但这是行不通的。

HTML

<div class="navigation-left">
  <ul>
    <li><a href="<?php echo $website_url; ?>">Home</a></li>
    <li><a href="<?php echo $website_url; ?>">SAF</a></li>
    <li><a href="<?php echo $website_url; ?>">Acudetox</a></li>
  </ul>
</div>

CSS

.navigation-left {
    height:auto;
    list-style:none;
    margin-right:40px;
    display:inline;
}
.navigation-left li{
    width:200px;
    height:25px;
    margin:5px;
    padding:5px;
    background-color:#666666;
    border:none;
    text-align:center;
    display:inline-block;
}
.navigation-left li:hover{
    background-color:#f36f25;
    color:#FFFFFF;
}
.navigation-left li a{
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.navigation-left li.current {
    background-color:#F36F25;
}
.navigation-left li.current a {
    color:#FFFFFF;
}

http://jsfiddle.net/W2x5y/

Answer 1

这是你想要的小提琴吗？

<div class="navigation-left" style="float:left">
<ul>
<li><a href="<?php echo $website_url; ?>">Home</a></li>
<li><a href="<?php echo $website_url; ?>">SAF</a></li>
</ul>
</div>

<div class="navigation-left">
<ul style="float:right; ">
<li><a href="<?php echo $website_url; ?>">Acudetox</a></li>
</ul>
</div>

Answer 2

正如您可能预期的那样，一个简单的float: right;就能做到这一点。

<div class="navigation-left">
    <ul>
        <li><a href="#">Home</a></li>
        <li style="float: right"><a href="#">SAF</a></li>
        <li><a href="#">Acudetox</a></li>
    </ul>
</div>

http://jsfiddle.net/W2x5y/1/

Answer 3

我认为，如果您想要这样做，就必须用类来定位一些li标记。此外，您需要最大的宽度的包含ul，以便给它的空间浮动在右边。

http://jsfiddle.net/W2x5y/2/

<div class="navigation-left">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">SAF</a></li>
    <li class="right"><a href="#">Acudetox</a></li>
    </ul>
</div>

ul {
    width: 100%;
}
.right {
    float: right;
}