Question

我在使用此导航栏时遇到问题。只要我将图像添加到链接的右侧，包含文本的li元素就会停止填充导航栏的整个高度。如何让它填满酒吧的整个高度？

修改：为图片添加了网址，以便在实时预览中查看

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="{% static 'js/jquery-2.1.4.js' %}"></script><!-- jQuery -->
  <link href='http://fonts.googleapis.com/css?family=Hind:600,700,400,500' rel='stylesheet' type='text/css'><!-- Google Fonts -->
  <!-- Begin Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!-- End Bootstrap -->
  <link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>


<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <!-- Why don't CSS attributes work when 'nav-link' is a class? -->
          <li><a href="#" id="nav-link">Link</a></li>
          <li><a href="#" id="nav-link">Another Link</a></li>
          <li><a href="#" id="nav-link">And Another</a></li>
          <li><a href="#" id="nav-link"><img src="http://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_small.png" alt="Sign in through Steam"></a></li>
          <!-- Steam login/Add functionality -->
        </ul>
      </div>
    </div></nav>
  <div class="container">
    <div class="row">
      <div class="col-md-6 game-info">
      </div>
      <div class="col-md-6 progress-bar">
      </div>
    </div>
  </div>


  <script src="{% static 'js/main.js' %}"></script>
</body>
</html>

CSS

body {
  background-color: white;
}

/*****************************************
NAV
*****************************************/
.navbar-default {
  background:#373737;
  border:0;
  border-radius:0px;
}

nav {
  font-family: 'Hind', sans-serif;
}

#nav-link {
  -webkit-transition: background .5s ease-out;
  -moz-transition: background .5s ease-out;
  -ms-transition: background .5s ease-out;
  -o-transition: background .5s ease-out;
  transition: background .5s ease-out;
  font-weight:600;
  font-size:16px;
  color:#ffffff;
  text-shadow:none;
  background:#373737;
}

#nav-link:hover {
  -webkit-transition: background .5s ease;
  -moz-transition: background .5s ease;
  -ms-transition: background .5s ease;
  -o-transition: background .5s ease;
  transition: background .5s ease;
  background:#14a1ff;
}

/*******************************************
BODY
*******************************************/
.container {
  width:100%;
}

.game-info {
  background:black;
}

.progress-bar {
  background:blue;
}

Answer 1

HTML

<ul class="nav navbar-nav navbar-right">
    <li class="nav-item"><a href="#">Link</a></li>
    <li class="nav-item"><a href="#">Another Link</a></li>
    <li class="nav-item"><a href="#">And Another</a></li>
    <li class="nav-item"><a href="#"><img src="http://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_small.png" alt="Sign in through Steam"></a></li>
</ul>

CSS

.nav-item {
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -ms-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;
    font-weight:600;
    font-size:16px;
    color:#ffffff;
    text-shadow:none;
    background:#373737;
}

.nav-item:hover {
    -webkit-transition: background .5s ease;
    -moz-transition: background .5s ease;
    -ms-transition: background .5s ease;
    -o-transition: background .5s ease;
    transition: background .5s ease;
    background:#14a1ff;
}

<li>元素未填充整个导航栏

1 个答案: