html - 添加边框导致我的标题格式出现问题

Question

我正在尝试为页眉添加边框，但当我这样做时，行高(或类似的东西)变得困惑。

HTML -

<div class='header'>
  <ul>
    <li>Home</li>
    <li>Services</li>
    <li>Estimates</li>
    <li>Co2 Calculator</li>
    <li>Contact Us</li>
  </ul>
</div> 

CSS -

.header {
    background-color: #006633;
    height: 50px;
    border-radius: 5px;
    border: 1px solid gray;
}

ul.headerlist {
    line-height: 50px;
    float: left;
    list-style-type: none;
    width: 19%;
    text-align: center;
    color: white;
}

与使用<ul>有关吗？或 <li> ？

Answer 1

首先清理您的 HTML 结构。

1. 您不需要将类应用到所有 LI，因为它们都是 一样。
2. 改为将 .header 的 CSS block 应用于 ul
3. 使用测量 ul 高度的 line-height 来获取 li 垂直居中。

.header {
  /* do whatever you want with the header */
  width: 100%; /* Adjust as needed */
  height: auto;
  }

.header ul {
background-color: #006633;
height: 50px;
border-radius: 5px;
border: 1px solid gray;
  display: block;
}
.header li {
width: 19%;
text-align: center;
color: white;
    display: inline-block;
  vertical-align: middle;
    line-height: 50px;
}

<div class=header>
    <ul>
                    <li>Home</li>
                    <li>Services</li>
                    <li>Estimates</li>
                    <li>Co2 Calculator</li>
                    <li>Contact Us</li>
    </ul>
 </div>