2

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

使链接（框）之一显示浮动到页面右侧的最佳方法是什么？

我尝试使用 float right 并将以下 CSS 复制为 navigation-right 并根据需要更改 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/

4

6 回答 6

3

这是你想要的小提琴吗？

<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>
于 2013-08-16T13:44:48.313 回答
1

我认为如果你想这样做，你必须用一个类来定位一些 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;
}
于 2013-08-16T13:55:31.903 回答
1

正如您所料，一个简单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/

于 2013-08-16T13:48:06.270 回答
0

都在右侧

.right_side{ 浮动：右}

<div class="navigation-left right_side">
<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>

最后<li>到右边 

.navigation-left li:last-child{ float:right}

第一个<li>在右边

.navigation-left li:first-child{ float:right}

<li>右二

.navigation-left li:nth-last-child(2){ float:right}
于 2013-08-16T14:02:14.380 回答
0

有趣的问题。我希望这会有所帮助。

您应该将 navigation-left 和 navigation-right 锚定到导航框本身。

html:

<div class="nav-box">
    <div class="nav-left">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
</div>

CSS

body .nav-box {

    top:0;
    width:100%;
    height:auto;
    background:#eee;
    overflow:hidden;
}
.nav-box .nav-left {
    display:inline;
    left:0;
    float:left;
    width:auto;
}
.nav-box .nav-right {
    display:inline;
    right:0;
    top:0;
    float:right;
    width:auto;
}

工作示例：http: //jsfiddle.net/VA7ya/1/

于 2013-08-16T13:49:44.377 回答
0

似乎这两个导航足以将它们分成两个元素。创建两个元素。这是一个小提琴：http: //jsfiddle.net/q7e3M/1/

<div class="container">
  <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>
    </ul>
  </div>
  <div class="navigation-right">
    <ul>
        <li><a href="<?php echo $website_url; ?>">Acudetox</a></li>
    </ul>
  </div>
</div>

如果你想保持相同的元素：http: //jsfiddle.net/Afxkt/1/

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

CSS：

.navigation {
    display: inline;
    list-style: none;
}
.navigation li {
    float: left;
}
.navigation-right {
    float: right;
}
于 2013-08-16T13:44:42.697 回答