css - 为导航和块创建一个 ul li 不适合

Question

有人可以解释为什么我的链接周围的框会起作用吗

代码是

CSS

#navigationbar ul{
    margin:0;
    padding:0;
}
#navigationbar ul li {
    display: inline-block;
    height: 20px;
}
#navigationbar ul li a {
    padding: 10px;
}

HTML

<div id="navigationbar">
 <ul>
  <li><a href="/home.html">Home</a></li>
  <li><a href="/about.html">About</a></li>
  <li><a href="/contact.html">Contact</a></li>
 <ul>
</div>

链接周围的框高度为 19 像素。填充使其为 39 像素，如果我将填充更改为 11 像素，则为 41 .. 那么如何让它像我的主导航容器一样为 40 像素？

或者也许是一种更有效的方式来完成这一切？

Answer 1

试试这个css，现在锚的高度是40px，

CSS

    #navigationbar ul{
    margin:0;
    padding:0;
}
#navigationbar ul li {
    display: inline-block;
    height: 19px;
}
#navigationbar ul li a {
    padding: 10px 0px 11px 0px;

}

HTML

<div id="navigationbar">
 <ul>
   <li><a href="/home.html">Home</a></li>
   <li><a href="/about.html">About</a></li>
   <li><a href="/contact.html">Contact</a></li>
 </ul>
</div>

Answer 2

像这样

您使用 li 但忘记关闭 li 并且您使用结束标记。

请使用<li></li>不能使用<li></div>

演示

CSS

#navigationbar ul{
    margin:0;
    padding:0;
}
#navigationbar ul li {
    display: inline-block;
    height: 20px;
}
#navigationbar ul li a {
    padding: 10px;
}

HTML

<div id="navigationbar">
 <ul>
   <li><a href="/home.html">Home</a></li>
   <li><a href="/about.html">About</a></li>
   <li><a href="/contact.html">Contact</a></li>
 </ul>
</div>

---

演示1

CSS

 #navigationbar ul{
    margin:0;
    padding:0;
}
#navigationbar ul li {
    display: inline-block;
    background-color:red;
     height:40px;
}
#navigationbar ul li a {
    padding:11px;
    vertical-align:middle;

}

Answer 3

    <div id="navigationbar">
 <ul>
   <li><a href="/home.html">Home</a></li>
   <li><a href="/about.html">About</a></li>
   <li><a href="/contact.html">Contact</a></li>
 <ul>
</div>