Question

我试图在文本的两侧都有这些小的左右边框。这是我想要做的： http://imgur.com/xCZnGgJ

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

我已将height: 30px添加到li和ul，但这不会改变任何内容。

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

如果有人知道还有什么方法可以将两个边界拉近一起呢？

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>

Answer 2

你可以简单地改变li来显示：inline-block;我为你创造了一个jsfiddle。

#pre_header li {
    display: inline-block;
    border-right: 1px solid #414141;
    border-left: 1px solid #414141;
}

此外，请勿使用.5px，请使用单笔金额。我用过1px。

http://jsfiddle.net/xeqsn83a/

Answer 3

尝试this：

* {
    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;
    font-size: 0;
}

#pre_header li {
    display: inline-block;
    border-right: 1px solid #414141;
    border-left: 1px solid #414141;
    margin-right: 1px;
}

#pre_header a {
    text-decoration: none;
    color: #fff;
    padding: 6px 15px 6px 15px;
    font-size: 16px;
    line-height: 30px;
}

#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>

我将display: inline更改为inline-block，将li更改为border-width（它必须是整数）。同时使用1px技术使li个项目更加接近（阅读this article以便了解）。

Answer 4

如果您想要触摸边框，则需要float它。正如其他人所提到的，您的边框宽度需要是实际的像素大小。没有.5px这样的东西。以下是您尝试做的（我认为）的一个示例：

http://jsfiddle.net/tuc4Lwuu/

#pre_header li {
  float: left;
  border-right: 1px solid #414141;
  border-left: 1px solid #414141;
  margin-right: 2px;
}

CSS菜单栏边框

4 个答案: