CSS菜单栏边框

Question

CSS菜单栏边框

3

我试图在文本两侧添加小的左右边框，这是我想要做的： http://imgur.com/xCZnGgJ 我的问题是，边框不与周围div的高度相同，但它们仅与文本的高度相同。以下是屏幕截图： http://imgur.com/I2jjsAm 我尝试将li和ul添加height: 30px，但这并没有改变任何内容。

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

如果有人知道是否有办法将这两个边框也靠近在一起吗？

- Bradley Cousins

4个回答

0

尝试使用 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>

我将 li 的 display: inline 改为 inline-block，将 border-width 改为 1px（必须是整数）。同时使用 font-size: 0 技巧使得 li 项之间更加接近（请阅读 this article 以了解详情）。

- sergdenisov

太好了，谢谢。你知道如何减小相邻两个边框之间的间隙大小吗？ - Bradley Cousins

@BradleyCouisns 是的，我修正了我的回答，请查看一下。我现在为 #pre_header li 设置了 margin-right: 1px，你可以根据需要增加或减少它。 - sergdenisov

0

你可以简单地将li更改为display: inline-block; 我已经为你创建了一个jsfiddle。

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

另外，不要使用0.5像素，请使用单个数值。我已经使用了1像素。

http://jsfiddle.net/xeqsn83a/

- Billy Purvis

0

如果您想让边框相接触，您需要对其进行 float。正如其他人所提到的，您的边框宽度需要是实际像素大小。不存在 .5px 这样的东西。以下是我认为您正在尝试做的示例：

http://jsfiddle.net/tuc4Lwuu/

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

- Sean Stopnik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gustaf Gunér · Accepted Answer

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