Question

我试图将边框向下移动，以便可以看到更多的主动链接。

.navigation a.active-link {
    background-border: #red;
    border-style: solid;
    border-bottom: solid white;
    color: black;
    padding:10px;
}


#navigation {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  word-wrap: break-word;
  padding-top: 10px;
  margin-bottom: 15px;
  overflow: hidden !important;
  white-space: no-wrap;
  text-overflow: clip;
  height: 26px;
}

问题是，当我尝试增加填充底部时，它会叠加我的文本而我试图避免这种情况。

https://jsfiddle.net/akn5r7y5/2/

Answer 1

您可以添加所需的填充底部并相应地设置锚线高度，以便它们不会叠加

#navigation a {
    line-height:26px;
}

#navigation {
  padding-bottom:26px;
}

https://jsfiddle.net/akn5r7y5/3/

Answer 2

在导航中添加填充底部可以解决您的问题。

在此处阅读有关箱子模型（填充，边距等）的更多信息 - https://css-tricks.com/box-sizing/

Answer 3

删除你的填充顶部，并使用行高，必须等于内容的高度，所以它将居中：

您的#navigation必须如此：

#navigation {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  word-wrap: break-word;
  margin-bottom: 15px;
  overflow: hidden !important;
  white-space: no-wrap;
  text-overflow: clip;
  height: 26px;
  line-height: 26px;
}

Answer 4

我认为你这样做比你需要的更难。尽量避免使用固定高度。同时在display: inline-block;上使用anchor。这样它有一个你可以实际使用的高度。例如：

＆＃13;

#navigation {
  border-bottom: 1px solid currentColor;
}

.navigation a {
  color: black;
  padding: 10px;
  display: inline-block;
  text-decoration: none;
}

.navigation a.active-link {
  background: red;
  border: 1px solid black;
  border-bottom: none;
}

＆＃13;

<div class="navigation" id="navigation">
  <a href="/" class="active-link">Show all</a>
  <a href="#" >title</a>
  <a href="#" >title1</a>
  <a href="#" >title2</a>
  <a href="#" >title3</a>
  <a href="#" >title4</a>
</div>

＆＃13;

Answer 5

这里有一些线索。

好吧忘记我刚才所说的hr标签。

我刚刚得到了你的问题，所以你想要创建一个带有边框底部的导航，如果你在那个页面中就是一个完整的边框..我建议你使用ul li标签。它有点舒适，如果你还没有任何响应，也不要使用太多的链接。

因为，白痴你认为这是一件容易的事，但实际上这里遇到了很大麻烦。这个<a></a>链接不应该分开，你应该像这样荒谬地输入代码

<a>link</a><a>link</a>

这意味着，您应该在没有间隙的情况下输入它，如果只是将它放在li标签中，它就会更容易阅读

<li><a>link</a></li><li>
<a>link</a></li><li>
etc

所以你只考虑一个内部的边框，不要考虑导航div中的边框。

这是代码，看看

.navigation a.active-link {
    border: solid 1px black;
    color: black;
    padding:10px;
}

.navigation a{
  padding:10px;
  border-bottom: 1px solid black;
}

#navigation {
  text-decoration: none;
  padding-top: 10px;
  padding-bottom:10px
}
hr{
  border:solid black 1px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="col-xs-12 col-lg-10 col-lg-offset-1">
      <div class="navigation" id="navigation">
        <a href="/" class="active-link">Show all</a><a href="#" >title</a><a href="#" >title1</a><a href="#" >title2</a><a href="#" >title3</a><a href="#" >title4</a><a href="#" >title5</a>
      </div>
      </div>

将边框底部远离文本移动

5 个答案: