Question

我目前正试图将我的导航栏对齐到右边，但是它固执地靠在左边，我不知道该怎么办。我觉得我已经尝试了所有东西 - 文本对齐，浮动等。我还包括HTML5 CSS重置，如果这有所不同。

有人可以查看我的代码，如果可能有某些原因这些导航项目不会转移到另一方，请告诉我们吗？我真的很沮丧。感谢。

HTML：

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

CSS：

  body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-  left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}

注意：这是我刚刚解决它的hacky方式

ul {text-align: right; width: 100%; background-color: #999; height: 20px; **padding-left: 750px;**}

但是，我不确定这是一个非常好的方法......

Answer 1

一个，当然，非常愚蠢的解决方案（但它的工作原理）是将列表项浮动到右边，然后在HTML中反转它们的顺序。像这样：

<ul>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="index.html">Home</a></li>
</ul>

body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px;}
li {float: right;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}

here is the JSFiddle for it

Answer 2

这很简单

http://jsfiddle.net/qZ7Tr/10/

将li float更改为display:inline;

body {
    font: normal 300 .8em'Open Sans', sans-serif;
    overflow-x:hidden;
}
ul {
    text-align: right;
    width: 100%;
    background-color: #999;
    height: 20px;
}
li {
    display:inline;
}
ul a {
    color: white;
    padding: 0 10px;
    text-decoration: none;
}
ul a:hover {
    color: #333;
}

Answer 3

在CSS中更改此行：

ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-left: 150px;}

对此：

ul {float: right; background-color: #999; height: 20px; padding-  left: 150px;}

问题是您的原始代码将宽度设置为100％。所以它在屏幕上伸展。 text-align不会将内部<li>元素浮动到右侧。因此，实现正确的唯一方法是摆脱width: 100%;并设置float: right;

如果您希望页面上有灰色框，请将<ul>包裹在<div>和background-color: #999;的{{1}}中。唯一的出路。

这是我创建的用于演示的HTML文件：

width:100%

编辑：附加测试HTML文件，以显示<!DOCTYPE html> <html lang="en"> <head> <title></title> <style type="text/css"> body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;} ul {float: right; background-color: #999; height: 20px; padding- left: 150px;} li {float: left;} ul a {color: white; padding: 0 10px; text-decoration: none;} ul a:hover {color: #333;} </style> </head> <body> <ul> <li><a href="index.html">Home</a></li> <li><a href="company.html">Company</a></li> <li><a href="team.html">Management Team</a></li> <li><a href="contact.html">Contact</a></li> </ul> </body> </html>包装器概念。它对我有用。

<div>

Answer 4

我建议使用代码来轻松应用样式：

<强> HTML：

<div class="nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="company.html">Company</a></li>
      <li><a href="team.html">Management Team</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

<强> CSS：

body {
    font: normal 300 .8em 'Open Sans', sans-serif; 
    overflow-x:hidden;
}
.nav {
    overflow: hidden;
    background-color: #999;    
    height: 20px; 
}
 ul {
    overflow: hidden;
    float: right;
}
ul li {
      float: left;
}
ul li a {color: white; 
    padding: 0 10px; 
    text-decoration: none;
}
 ul li a:hover {
      color: #333;
}

查看代码已截断http://jsfiddle.net/sophy/eRLtw/

Answer 5

ul {float:right;}

不要给ul一个宽度，你就会得到你正在寻找的东西。

Answer 6

不知道您是否曾经对此进行过排序，但是可以尝试一下...

ul {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    text-align:right;
}
ul li {
    display:inline-block;
}

然后根据需要设置样式，例如填充等。

无需担心浮点数就可以解决问题。

丹

将导航栏对齐/浮动到右侧

6 个答案: