水平导航无法正确对齐

我知道这已在此处讨论过 - 因为我已阅读了许多关于同一事物的问题。并试图解决方案，但我似乎无法使这个愚蠢的导航右对齐（需要锂块对齐到右侧）。有人可以指出我的错误 - 谢谢。水平导航无法正确对齐

http://jsfiddle.net/gstricklind/vP38J/4/

CSS

ul#menu-main-top { 
    float: right; 
} 
.nav-bar > li { 
    border: 1px solid #333; 
    display: block; 
    float: left; 
    line-height: 38px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
ul#menu-main-top li a { 
    color: #222222 !important; 
} 
.top-nav > li > a { 
    color: #E6E6E6 !important; 
} 
.nav-bar > li > a:first-child { 
    margin: 0 0 0 10px; 
    padding: 0 0 0 30px; 
} 
.nav-bar > li > a:first-child { 
    display: block; 
    font-size: 14px; 
    padding: 0 20px; 
    position: relative; 
    text-decoration: initial; 
}

HTML

<div class="eight columns"> 
    <ul id="menu-main-top" class="top-nav nav-bar hide-for-small"> 
     <li id="menu-item-58">     
      <a href="#">Home</a> 
     </li> 
     <li id="menu-item-94"> 
      <a href="#">Calendar</a> 
     </li> 
     <li id="menu-item-59"> 
      <a href="#">Meanings</a> 
     </li> 
     <li id="menu-item-77"> 
      <a href="#">About Us</a> 
     </li> 
     <li id="menu-item-67"> 
      <a href="#">Contact Us</a> 
     </li> 
     <li id="menu-item-343" class="active"> 
      <a href="#">My Account</a> 
     </li> 
     <li class="logout"> 
      <a href="#">Logout</a> 
     </li> 
    </ul>      
</div>

来源

2013-01-02 gstricklind

看起来与我的权利保持一致。它出什么问题了？ – jmeas

所有的li都在ul的左边对齐。 ul对齐。但我需要所有李的权利。所以当添加更多的李时，他们不会从左边开始，而是从右边开始。我有道理吗？我已经在Safari，Firefox和Chrome中进行了测试（或尝试过）。 – gstricklind

对不起，改了标题 - 它可能是混乱。 – gstricklind

难道这就是你想干什么？

http://jsfiddle.net/vP38J/5/

培训相关改变代码：

.nav-bar > li { 
    border:1px solid #333; 
    display:block; 
    float: right; 
    line-height:38px; 
    margin:0; 
    padding:0; 
    position:relative; 
}

另外，如果你正在寻找有顺序保持不变，只是扭转HTML列表的顺序。

来源

2013-01-03 00:06:24

是的，但链接反转。我试图像这样对齐，但链接顺序需要是正常的。通常情况下，我不会有什么问题搞清楚这一点..不知道我这次做错了什么。 – gstricklind

也许这个解决方案对你想要的更好：http：//jsfiddle.net/vP38J/7/ 我将块从块更改为内联块，并删除了浮动。然后为ul添加一个文本对齐权限。 –

我认为就是这样！我不知道为什么我没有考虑去除那个浮点数：离开li。谢谢！ – gstricklind

水平导航无法正确对齐

回答

相关问题