Css 导航栏 (css&html) 问题

Question

所以，我有这个导航栏：

我想给它加上边框，但它变大了，我不喜欢:

我试着设置导航栏的高度，但是链接放不下了，也没办法把它们放回去：

请帮忙。

代码(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 显示为块并将 Navigation 显示为内联块，我会得到这个：

Answer 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;
}

Answer 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>

Answer 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>

Answer 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，不需要为此指定 classes。我添加了列表样式：none，因为您不希望您的列表带有项目符号。还将 display: inline-block 替换为 float: left，基本上做同样的事情。边距是 shorthand for margin-top: 0px, margin-right: 10px, margin-bottom: 0px and margin-left: 0px;

作为最后一点，行高：10px；这会将您的链接排在中间。

还有个小提示，id不能重复使用！ id 总是 unique，如果你想重复使用它，请改用 class。

Answer 5

没有理由将段落放在 link 标签内。
段落标签默认有一些边距，使导航栏更高。
也是无序的列表默认有边距，这使得它更高。
所以最简单的方法是删除段落标签。
即使这还不够，你也可以删除无序列表的边距。
看看这个 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>

Css 导航栏 (css&html) 问题

Css navigation bar (css&html) issue

html

css

navigation

navbar