html - 底部边框比我需要的长(需要与文本长度相同)

Question

我有一个问题。我的 border-bottom 太长了:

如何使 border-bottom 与文本长度相同？这是我的 HTML:

        <div class="navbar-header">
            <a href="index.php">
                <img src="images/logo.png" alt="Broke">
            </a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Share a coupon</a></li>
                <li><a href="#">Faq</a></li>
            </ul>
        </div>
    </nav>

CSS:

.navbar {
    margin-top: 60px;
    border: none;
}

.navbar-default {
    border: none;
    background-color: #FFF;
}

.navbar-toggle {
    margin-top: 25px;
}

.navbar ul li a {
    margin-top: 10px;
}

.nav li a {
    font-family: Avenira;
    color: #676767;
    font-size: 24px;
    padding: 10px 0 10px 55px;
}

.nav li a:hover {
    border-bottom: 4px solid #fe8502;
}

P.S 我正在使用 Bootstrap 框架。

几个小时以来一直试图弄清楚如何做到这一点...提前感谢您的帮助!

Answer 1

padding 影响元素的内部大小，边框会随之增长，而 margin 则不会。

将你的 .nav li a 规则更新为这个

.nav li a {
  font-family: Avenira;
  color: #676767;
  font-size: 24px;
  padding: 10px 0;
  margin-left: 55px;
}

.navbar {
  margin-top: 60px;
  border: none;
}
.navbar-default {
  border: none;
  background-color: #FFF;
}
.navbar-toggle {
  margin-top: 25px;
}
.navbar ul li a {
  margin-top: 10px;
}
.nav li a {
  font-family: Avenira;
  color: #676767;
  font-size: 24px;
  padding: 10px 0;
  margin-left: 55px;
}
.nav li a:hover {
  border-bottom: 4px solid #fe8502;
}

<nav>
  <div class="navbar-header">
    <a href="index.php">
      <img src="images/logo.png" alt="Broke">
    </a>
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a>
      </li>
      <li><a href="#">Share a coupon</a>
      </li>
      <li><a href="#">Faq</a>
      </li>
    </ul>
  </div>
</nav>