添加边框导致我的 header 格式出现问题

Question

我正在尝试为我的 header 添加边框，但是当我这样做时，line-height（或类似的东西）变得混乱。

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

.header ul{margin-top:0;} 好了。

Answer 2

试试这个 fiddle：http://jsfiddle.net/m71mchow/14/ 并添加此 css :

ul, li{margin:0; padding:0}

Answer 3

首先清理您的 HTML 结构。

您不需要将 class 应用于所有 LI，因为它们都是一样。
将 .header 的 CSS 块应用到 ul
使用测量 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>

添加边框导致我的 header 格式出现问题

Adding a border is causing my header format to have issues

html

css

html-lists

border