Question

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

enter image description here

如您所见，联系人链接的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（因为它更容易编写），而且我正在使用基础。

为了弄清楚问题，我在firefox中打开了检查器，这就是我在选择ul时所看到的：

enter image description here

所以ul占据了那个空间。

现在，如果我看一下第一行的最后一行，我会看到： enter image description here

所以li也没有占据那个空间。

现在，问题在于，当我删除那些li上的边距时，它会按预期工作（粗糙而没有边缘出现）

enter image description here

现在，在基础上，类right确实添加了float: right;样式，因此可能是问题（我发现如果我添加宽度，它会更好一些，但是我仍然得到一些类似的保证金错误。）

Answer 1

看起来浮动，边距和宽度存在一些问题。您已经定义了display: table;和float: none;等不需要的内容。在给出示例的情况下，不需要text-align，但不是导致问题的原因。

最好的办法就是把一切都搞砸。看看我创建的the JSFiddle使用最基本的定义来实现目标。您还可以尝试删除属性并查看发生的情况。除了标题上的100％之外，您不需要在容器元素上定义固定宽度。

.header {
    width: 100%;
}

h3 {
    float: left;
}

.nav {
    float: right;
}

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

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

上面是来自JSFiddle的代码，它执行实际的东西，示例中css中的额外内容仅用于演示目的。

在标题上设置100％宽度可确保它达到整个宽度并且具有子元素的空间。

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

在<ul>内<li>向左浮动，并应用保证金。 :last-child选择器将最后一个边距移开，允许间距工作。然后你可以用<ul>填充它，使其均匀分布在每一侧。

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

Answer 2

向左浮动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 3

试试这个..

<强> 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%;
}

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

3 个答案: