Question

我有问题。我的边界底部太长了：

如何做边框底部将是文本长度？这是我的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>

Answer 2

尝试使用margin而不是padding。 Check this out了解更多详情。

.nav li a {padding: 10px 0;margin-left: 55px;}

底部边框比我需要的长（需要与文本长度相同）

2 个答案: