Question

我正在尝试获取一个导航栏，其中包含一个带有无序列表的导航栏，以便与页面宽度的右侧对齐。导航本身应该跨越整个宽度（它是整个页面的黑色条）但链接本身应该与内容宽度的右边对齐，如下所示：

|                                        home | about | etc.               |
|                                                                          |
|            This is content with a fixed with in the center               |
|            of the page.                                                  |

我的HTML：

<nav>
 <ul id="navlist">
  <li><a href="#">Home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">etc,</a></li>
 </ul>
</nav>

CSS：

nav {
  display:block;
  background:#000;
 }

  nav ul {
   margin: 0 auto;
   width: 777px;
  }
   nav ul li {
    float:left;

   }

但当然这是在页面的左侧，如果没有添加额外的div元素，我似乎无法向右移动...唯一的选择是浮动<li>的是的，但这意味着我的导航顺序相反，我真的不希望...这是一个自动生成的wordpress安装页面列表，所以我可以在管理面板中反向订购页面，但必须改变后端的东西并不是处理设计的好方法。

任何？

Answer 1

nav {
  display:block;
  background:#000;
  text-align:right;      
 }

  nav ul {
   margin: 0 auto;
   width: 777px;
  }
   nav ul li {
    display: inline;

   }

如何做这个浮动/对齐没有额外的div？

1 个答案: