ul 标签未正确拉伸并给出一些奇怪的边距错误

Question

我正在为自己建立一个网站，我有点卡在导航上。

如您所见，联系人 link 的 li 被强制向下一行。

HTML

<html>
    <head>
        <title>Mattheas Boelter</title>

        <link rel="stylesheet" type="text/css" href="css/foundation.min.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">

        <script type="text/javascript" href="jquery.js"></script>
        <script type="text/javascript" href="foundation.min.js"></script>
    </head>

    <body>
        <div id="nav">
            <div class="container">

                <a href="#" class="left"><h3>TARDIS Maker</h3></a>


                <ul class="right">
                    <li><a href="#">PORTFOLIO</a></li>
                    <li><a href="#">BLOG</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS

body {
  background-color: #202020;
}

#nav {
  background-color: #101010;
}
#nav .container:after {
  clear: both;
  content: "";
  display: table;
}
#nav ul li {
  float: none;
  display: inline;
  text-align: right;
  margin-right: 1%;
}
#nav ul li a {
  color: #AAA;
}
#nav h3 {
  color: #AAA;
  margin: 0%;
  margin-left: 10%;
}

应该说的是，我正在使用 sass 作为 css（因为它更容易编写），并且我正在使用 foundation。

为了弄清楚这个问题，我在 firefox 中打开了检查器，这就是我在 select ul:

时看到的

所以 ul 正在占用 space。

现在，如果我查看第一行最后的 li，我会看到：

所以 li 也没有占用 space。

现在，问题是，当我删除那些 li 的边距时，它按预期工作（粗略的，没有出现边距）

现在，在基础中，class right 确实添加了 float: right; 样式，所以这可能是问题所在（我发现如果我添加宽度，它效果好一点，但我仍然遇到一些类似的边距错误。

Answer 1

将 li 向左浮动并在 li 的 a 上使用 display:inline-block。示例：

.nav li {
float:left;
padding:10px 15px 0px 15px;
line-height: 20px; 
list-style-type: none;
 }

 .nav a {
 vertical-align: middle;
display:inline-block;
text-align:center;
line-height: 20px; 
padding:5px;
 }

Answer 2

试试这个..

css

body {
  background-color: #202020;
}

#nav {
  background-color: #101010;
}
#nav .container:after {
  clear: both;
  content: "";
  display: table;
}
#nav ul.right{
  width: 350px;
}
#nav ul li {
 float: none;
 display: inline;
 text-align: right;
 margin-right: 1%;
}
#nav ul li a {
 color: #AAA;
}
#nav h3 {
 color: #AAA;
 margin: 0%;
 margin-left: 10%;
}

Answer 3

浮动、边距和宽度似乎存在一些问题。您定义了不需要的 display: table; 和 float: none; 之类的东西。在示例中也不需要 text-align，但这不是导致问题的原因。

最好的办法是把所有东西都去掉。查看我创建的 the JSFiddle，它使用最基本的定义来实现目标。您也可以尝试删除属性并查看会发生什么。除了 header.

上的 100% 之外，您不需要在容器元素上定义固定宽度

.header {
    width: 100%;
}

h3 {
    float: left;
}

.nav {
    float: right;
}

li {
    float: left;
    margin-right: 10px;
}

li:last-child {
    margin-right: 0;
}

以上是 JSFiddle 中的代码，它执行实际操作，示例中 css 中的额外内容仅用于演示目的。

在 header 上设置 100% 宽度确保它达到全宽并为 child 元素留出空间。

分别向左和向右浮动 <nav> 和 <h3> 意味着它们会缩小到其内容的大小，并且不会扩展和向下推动其他元素。

在 <ul> 中，<li> 向左浮动并应用边距。 :last-child 选择器从最后一个选择器中取出边距，允许间距起作用。然后，您可以将 <ul> 填充到 space 它均匀地分布在每一侧。

尝试简化示例，看看是否有帮助。

ul 标签未正确拉伸并给出一些奇怪的边距错误

ul tag not stretching properly and giving some weird margin errors

html

css

zurb-foundation