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

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

.header ul {margin-top：0;}你走了。

Answer 2

尝试这个小提琴：http://jsfiddle.net/m71mchow/14/ 并添加此css：

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

Answer 3

首先清理HTML结构。

1. 您不需要将该课程应用于所有LI，因为他们都是 同样。
2. 将用于.header的CSS块应用于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>