Question

在为我的网页制作navbar时，如果navbar-brand文字太大，navbar文字就会流出导航栏。有趣的是，我的navbar的其他列表项不会发生这种情况。增加列表项的字体大小并不重要，<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="index.php">Brand Name</a> </div> <ul class="nav navbar-nav"> <li><a class="navbar_text" href="activities.php">Activities</a></li> <li><a class="navbar_text" href="result.php">Results</a></li> <li><a class="navbar_text" href="about_us.php">About Us</a></li> </ul> </div>随之增长。这是HTML -

.navbar-nav {
float: right;
}

.navbar {
    background-color: #282343;
}

.navbar_text {
    color: #9B9BD4;
    font-family: 'Arvo', Georgia, Times, serif;
    font-size: 39px;
    line-height: 70px;
}

.navbar-brand {
    color: #9B9BD4;
    font-family: 'Arvo', Georgia, Times, serif;
    font-size: 59px;
    line-height: 70px;
}

和CSS -

QB

我希望品牌文字比列表项更大。请帮忙。

Answer 1

如果您希望您的内容保留在导航栏div中，您可以设置他们的css styes

  max-height: 90%;
  max-width: 50px;

这将使它们整齐地保留在你的导航div中，而导航本身可以继续调整大小。设置最大值也将允许您的元素继续缩放，但永远不会离开父div。 max-height 90％将确保您的内容永远不会超过导航栏高度的90％。（根据需要调整值）

Answer 2

您可以通过将行高更改为70px并将填充更改为.navbar-brand的0px来实现。试试这个css。

.navbar-brand {
color: #9B9BD4;
font-family: 'Arvo', Georgia, Times, serif;
font-size: 59px;
line-height: 50px;
padding: 0px;

}

Answer 3

也许是因为你使用了“float：right”选择器。当你使用{float}时 - 元素“走出”他的边界，以便将自己置于你所定义的地方（右）。

navbar-brand文本流出导航栏

3 个答案: