Css 导航栏 (css&html) 问题答案

【问题标题】：Css navigation bar (css&html) issueCss 导航栏 (css&html) 问题
【发布时间】：2015-09-15 06:27:39
【问题描述】：

所以，我有这个导航栏：

我想在它周围加个边框，但它变大了，我不喜欢：

我尝试设置导航栏的高度，但链接不再适合，并且无法将它们放回：

请帮忙。

代码（CSS）：

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    //font-family: lkth;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
}
#navLi {
    display: inline-block;
    margin-right: 10px;
}
.navA {
    color: #000000;
}

代码（HTML）：

<div id="navigation">
    <ul id="navUl">
        <li id="navLi"><a class="navA" href="#"><p>Page d'accueil</p></a></li>
        <li id="navLi"><a class="navA" href="#"><p>Evénements</p></a></li>
        <li id="navLi"><a class="navA" href="#"><p>Contactez nous</p></a></li>
    </ul>
</div>

编辑： 如果我将 navLi 显示为块并将导航显示为内联块，我会得到这个：

【问题讨论】：

如果将#navLi 显示为块，将#navigation 显示为内联块，你会得到什么结果？

标签： html css navigation navbar

【解决方案1】：

尝试将box-sizing: border-box; 设置为导航。这种方式边框不应该加起来块尺寸。

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    /* font-family: lkth; */
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
    box-sizing: border-box;
}

【讨论】：

不起作用，链接离导航栏越远。
然后通过额外的边距调整检查 jaunt 的答案。

【解决方案2】：

最简单的选择是将box-sizing: border-box; 添加到#navigation，但您也可以尝试使用margin:-5px;。我修复了您示例的语义并添加了margin:-5px。希望这会有所帮助。

#navigation {
  margin: 0 auto;
  background-color: #FFFFFF;
  //font-family: lkth;
  border: double;
  border-width: 5px;
  border-color: #663D07;
  border-radius: 10px;
  height: 40px;  
  list-style-type:none;
}
#navigation  ul {
  margin:-5px;
}
#navigation li {
  display: inline-block;
  margin-right: 10px;  
}
#navigation a {
  color: #000000;
}

<div id="navigation">
  <ul>
    <li><a href="#"><p>Page d'accueil</p></a></li>
    <li><a href="#"><p>Evénements</p></a></li>
    <li><a href="#"><p>Contactez nous</p></a></li>
  </ul>
</div>

【讨论】：

这行得通，谢谢！不过我想知道，为什么当我尝试为 li 元素设置 margin-bottom 时链接没有返回。
啊，这可能是因为您需要使用 margin-top 来代替。但是，整体更正边距更容易，以便以后更容易定位元素:)

【解决方案3】：

这是您编辑的代码：

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
}
#navUl{
 margin: 0 auto;
 width: 500px;
 padding-top: 10px;
 }
#navLi {
   display: inline-block; 
   height: 40px;  
}

<div id="navigation">
   <ul id="navUl">
       <li id="navLi"><a class="navA" href="#">Page d'accueil</a></li>
       <li id="navLi"><a class="navA" href="#">Evénements</a></li>
       <li id="navLi"><a class="navA" href="#">Contactez nous</a></li>
   </ul>
</div>

【讨论】：

【解决方案4】：

你可以这样做：

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    //font-family: lkth;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
    display: block;

}
#navigation li {
    margin: 0 10px 0 0;
    float: left;
    padding: 0;
    list-style: none;
    line-height: 10px;

}
#navigation a {
    color: #000000;
}

<div id="navigation">
    <ul id="navUl">
        <li><a href="#">Page d'accueil</a></li>
        <li><a href="#">Evénement</a></li>
        <li><a href="#">Contactez nous</a></li>
    </ul>
</div>

您可以直接在导航中定位您的 li 和 a，您无需为此指定类。我添加了 list-style: none，因为您不希望列表带有项目符号。还用 float:left 替换了 display: inline-block，它基本上做同样的事情。 margin 是 margin-top: 0px, margin-right: 10px, margin-bottom: 0px 和 margin-left: 0px 的简写；

最后一点，行高：10px；这将您的链接更多地排在中间。

还有一个小提示，id 不能多次使用！ id 始终是唯一的，如果您想重用它，请改用 class。

【讨论】：

【解决方案5】：

没有理由将段落放在链接标签中。
默认情况下，段落标签有一些边距，这使得导航栏更高。
此外，无序列表默认有边距，这使得它更加更高。
所以最简单的方法是删除段落标签。
即使这还不够，您也可以删除无序列表的边距。
看看这个 JSFiddle：

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    //font-family: lkth;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
}
#navLi {
    display: inline-block;
    margin-right: 10px;
}
/* #navUl {
    margin: 0;
} */

/* If thats not enought you can uncomment the above code */
.navA {
    color: #000000;
}

<div id="navigation">
    <ul id="navUl">
        <li id="navLi"><a class="navA" href="#">Page d'accueil</a></li>
        <li id="navLi"><a class="navA" href="#">Evénements</a></li>
        <li id="navLi"><a class="navA" href="#">Contactez nous</a></li>
    </ul>
</div>

【讨论】：