8

我目前正在尝试将导航栏向右对齐，但它顽固地粘在左侧，我不知道该怎么做。我觉得我已经尝试了所有方法 - text-align、float 等。我还包含了 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;**}

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

4

6 回答 6

6

一种，公认的非常愚蠢的解决方案（但它有效），是将列表项向右浮动，然后在 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;}

这是它的 JSFiddle

于 2013-01-28T00:59:36.970 回答
4

这很简单

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;
}
于 2013-01-28T03:00:51.563 回答
1

在 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;和 的a 中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>

编辑：附加测试 HTML 文件以显示<div>包装器概念。这个对我有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>

  <title></title>
  <style type="text/css">
    body
    {
        font: normal 300 .8em 'Open Sans', sans-serif;
        overflow-x: hidden;
    }

    div
    {
        float: left;
        width: 100%;
        background-color: #999;
    }

    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>
  <div>
    <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>
</body>
</html>
于 2013-01-28T01:05:58.403 回答
0

我建议下面的代码可以轻松应用样式：

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/

于 2013-01-28T02:39:46.737 回答
0 
ul {float:right;}

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

于 2016-03-09T20:58:36.713 回答
0

不知道你有没有整理过这个，但可以试试这个......

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

然后用填充等设置你需要的样式。

可能会在不担心浮动的情况下做到这一点。

担

于 2018-09-19T13:22:02.063 回答