html - CSS 菜单栏边框

Question

我正在尝试在文本的两侧添加这些小的左右边框。这是我想要做的: http://imgur.com/xCZnGgJ

我的问题是边框与周围 div 的高度不同，但它们只与文本高度相同。这是一个屏幕截图: http://imgur.com/I2jjsAm

我已经将 height: 30px 添加到 li 和 ul 中，但这并没有改变任何东西。

*{margin:0;}

#header {
  width:100%;
}

#pre_header {
  width:100%;
  height:30px;
  background-color:#202020;
}
.pre_header_content {
  margin:0 auto;
  width:1040px;
}
#pre_header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height:30px;
}
#pre_header li {
  display: inline;
  border-right: .5px solid #414141;
  border-left: .5px solid #414141;
}
#pre_header a {
  text-decoration:none;
  color:#fff;
  padding:6px 15px 6px 15px;
}
#pre_header a:hover {
  background-color:#4e4e4e;
}

<div id="header">
  <div id="pre_header">
    <div class="pre_header_content">
      <ul>
        <li><a href="pages/#.php">Voucher codes</a></li>
        <li><a href="pages/#.php">In-store codes</a></li>
        <li><a href="pages/#.php">Online codes</a></li>
        <li><a href="pages/#.php">Free samples</a></li>
        <li><a href="pages/#.php">Advertise</a></li>
      </ul>
    </div>
  </div>
  <div id="main_header">
    <div class="main_header_content">
      Test
    </div>
  </div>
</div>

如果有人知道无论如何也可以将两个边界拉近一点吗？

Answer 1

将 padding:6px 15px 6px 15px; 添加到 li 而不是 a。而且，0.5px 不起作用。什么是半像素？更新了您的代码。见下文!

编辑:注意:我还更改了您的悬停效果以影响 li 元素而不是 a。

*{
  margin:0;
  box-sizing: border-box;
}

#header {
    width:100%;
}


#pre_header {
    width:100%;
    height:30px;
    background-color:#202020;
}
.pre_header_content {
    margin:0 auto;
    width:1040px;
}
#pre_header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header li {
    display: inline;
    border-right: 1px solid #414141;
    border-left: 1px solid #414141;
    padding: 0 15px;
    float:left;
    margin-right: 2px;
}
#pre_header li:last-child{
  margin-right: 0;  
}
#pre_header a {
    text-decoration:none;
    color:#fff;
    

}
#pre_header li:hover {
    background-color:#4e4e4e;

}

<div id="header">
    <div id="pre_header">
        <div class="pre_header_content">
            <ul>
                <li><a href="pages/#.php">Voucher codes</a></li>
                <li><a href="pages/#.php">In-store codes</a></li>
                <li><a href="pages/#.php">Online codes</a></li>
                <li><a href="pages/#.php">Free samples</a></li>
                <li><a href="pages/#.php">Advertise</a></li>
            </ul>
        </div>
    </div>
    <div id="main_header">
        <div class="main_header_content">
            Test
        </div>
    </div>
</div>