Question

我使用padding-top在li和它的边框之间留出空间，但是它会移动所有导航栏。

无论如何在不移动的情况下腾出空间？

＆＃13;

nav {
  float: right;
  width: 80%;
  font-size: 80%;
  text-align: right;
}
nav li {
  display: inline-block;
  list-style-type: none;
  margin: 2.5%;
  padding: 0.5%;
}
nav li a {
  color: #646464;
  font-weight: bold;
  text-decoration: none;
}
nav li.active,
nav li:hover {
  border-top: 3px solid #f0842a;
  padding-top: 20px;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#link3">LINK 1</a>
    </li>
    <li class="active"><a href="#link4">LINK 2</a>
    </li>
    <li><a href="#link5">LINK 3</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

您可以使用margin-top 10px和padding-top 10px。这将保持元素的尺寸相同，边框将更接近文本。

使用此功能，li元素的顶部总空间为20px。

＆＃13;

nav {
  float: right;
  width: 80%;
  font-size: 80%;
  text-align: right;
}
nav li {
  display: inline-block;
  list-style-type: none;
  margin: 2.5%;
  padding: 0.5%;
}
nav li a {
  color: #646464;
  font-weight: bold;
  text-decoration: none;
}
nav li.active,
nav li:hover {
  border-top: 3px solid #f0842a;
  padding-top: 10px; /* Use 10px; here */
  margin-top: 10px; /* Use 10px; here */
}

＆＃13;

<nav>
  <ul>
    <li><a href="#link3">LINK 1</a>
    </li>
    <li class="active"><a href="#link4">LINK 2</a>
    </li>
    <li><a href="#link5">LINK 3</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

如果所需的效果是当活动类应用于其中一个菜单项而不移动菜单时，您应该为每个列表项具有一个边框顶部，其宽度相同但透明或与背景颜色相同，并且当应用类时它只会改变这个边界的颜色。

Answer 3

向.nav添加-20px的保证金将取消掉落。

nav {
  float: right;
  width: 80%;
  font-size: 80%;
  text-align: right;
  margin-top: -20px;
}
nav li {
  display: inline-block;
  list-style-type: none;
  margin: 2.5%;
  padding: 0.5%;
}
nav li a {
  color: #646464;
  font-weight: bold;
  text-decoration: none;
}
nav li.active,
nav li:hover {
  border-top: 3px solid #f0842a;
  padding-top: 20px;
}

<nav>
  <ul>
    <li><a href="#link3">LINK 1</a>
    </li>
    <li class="active"><a href="#link4">LINK 2</a>
    </li>
    <li><a href="#link5">LINK 3</a>
    </li>
  </ul>
</nav>

Answer 4

使用负余量是我认为一个坏习惯这是我的想法和我已阅读过许多文章，并根据您接受的答案还有另一种方法来实现这个目标，在这里我已经给出了

nav {
  float: right;
  width: 80%;
  font-size: 80%;
  text-align: right;
}
nav ul{
  margin-top: 0;
}
nav li {
    display: inline-block;
    list-style-type: none;
    margin: 0 2.5% 2.5% 2.5%;
    padding: 0.5%;
}
nav li a {
  color: #646464;
  font-weight: bold;
  text-decoration: none;
}
nav li.active,
nav li:hover {
  border-top: 3px solid #f0842a;
  padding-top: 20px;
}

<nav>
  <ul>
    <li><a href="#link3">LINK 1</a>
    </li>
    <li class="active"><a href="#link4">LINK 2</a>
    </li>
    <li><a href="#link5">LINK 3</a>
    </li>
  </ul>
</nav>

这是演示工作代码

Check Out

<强> Actual Demo

Answer 5

nav{
  float:right;
  width:80%;
  font-size:80%;
  text-align: right;
  overflow: hidden;
}
nav li{
  float: left;
  list-style-type: none;
  padding: 20px 0;
  margin-right: 20px;
  border-top: 3px solid transparent;
}
nav li a{
  color: #646464;
  font-weight: bold;                
  display: block;
  text-decoration: none;

}
nav li.active,
nav li:hover{
  border-top-color:#f0842a;
}

<nav>
  <ul>
    <li><a href="#link3">LINK 1</a>
    </li>
    <li class="active"><a href="#link4">LINK 2</a>
    </li>
    <li><a href="#link5">LINK 3</a>
    </li>
  </ul>
</nav>

文本和边框之间的空间

5 个答案: