Question

我创建了一个响应能力很强的导航。我还想在导航右侧为“帐户”添加一个链接。

我的想法是将一个div插入ul但我认为这不符合。

<div class="navigation">
<ul>
    <li><a href="#">Welcome</a></li>
    <li><a href="#">Me</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
    <div class="account">Account</div> 
</ul>
<a href="#" class="pull">Navigation</a>

这是JS Fiddle Demo

重要的是，我希望右侧的“帐户”，而不是其他导航项目的并排。在700px的屏幕尺寸下，它应该在联系人li下。

应如下所示：http://www.directupload.net/file/d/3718/xneivu5d_png.htm

抱歉我的英语不好。我希望你能理解我的问题，也许你有一个好主意来解决这个问题。

Answer 1

您的.navigation li{ float: left;} CSS将所有<li>元素拉到左侧。

为＆＃34;帐号＆＃34;添加<li>标记像这样，使用新的account类。

<li class="account"><a href="#">Account</a></li>

并添加到您的CSS：

.account{
    float: right !important;
}

Updated JS Fiddle

此外，您还必须调整媒体查询宽度以进行菜单折叠，因为该帐户现在出现在菜单折叠之前的小屏幕宽度的第二行。

Answer 2

编辑：

我认为你想要的不正确，我决定更新我的答案。

http://jsfiddle.net/AlexCharlton/bb26gau3/3/

<body>
<div class="navigation">
    <ul>
        <li><a href="#">Winterhalder</a></li>
        <li><a href="#">Me</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>
        <div class="account">
    <ul>
     <li><a href="#">Account</a></li>
    </ul>
</div>
    </ul>
    <a href="#" class="pull">Navigation</a>
</div>    
</body>

CSS：

.account {
   float:right;
}

Answer 3

让您的.account div超出UL，然后您可以设置样式。像这样：

<div class="navigation">
<ul>
    <li><a href="#">Winterhalder</a>

    </li>
    <li><a href="#">Me</a>

    </li>
    <li><a href="#">Service</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
</ul>
<div class="account">Account</div>  <a href="#" class="pull">Navigation</a>

</div>

然后在CSS中添加：

`/* NAVIGATION */
.navigation {
width: 100%;
height: 50px;
background: #34495E;
position: fixed;
top: 0;
}
.navigation ul {
width: auto;
max-width:960px;
height: 50px;
margin: 0px auto;
padding: 0px;
float:left;
}
.account {
float:right;
margin:0px 20px
}
.navigation li {
display: inline;
float: left;
}
.navigation a, .account, .account a {
font: 400 14px Open Sans;
color: #FFF;
width: 140px;
line-height: 50px;
text-align: center;
display: inline-block;
}
.navigation a:hover, .navigation a:active {
color: #1abc9c;
}
.navigation a.pull {
display: none;
}
/* RESPONSIVE */
@media screen and (max-width: 960px) {
.navigation {
    height: auto;
}
.navigation ul {
    width: 100%;
    display: block;
    height: auto;
}
}
@media screen and (max-width: 560px) {
.navigation {
    height: auto;
}
.navigation ul {
    display: none;
}
.navigation li {
    display: block;
    float: none;
    width: 100%;
}
.navigation a.pull {
    display: block;
    background-color: #2C3E50;
    width: 100%;
    position: relative;
}
.navigation a.pull:after {
    display: inline-block;
}
.navigation a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
}
}`

您可能需要进行一些小的调整，因为我不是100％确定这是否是您需要的，但它会帮助您找到如何做到这一点。见fiddle here

添加响应式导航的其他链接

3 个答案: