引导：<a> tag inside </a> <li> <a> doesn&#39;t work as expected

时间：2017-11-22 11:41:18

标签： html css twitter-bootstrap twitter-bootstrap-4

I have tried to paste "a" tag inside "li". But I can't understand why there is no pointer cursor on tag and href attribute doesn't work as usual.What bootstrap property locks it? It is not enough paddings for li tag? Or what I'm doing wrong? What is a better way to improve it using bootstrap classes? Any help will be appreciated. 

body {
  margin: 0;
  padding: 0;
  font-family: "Arial, Helvetica, sans-serif,";
  font-size: 12px;
  font-weight: normal;
}

.header {
  background-color: #222222;
  height: 114px;
}
ul {
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-family: "MyradProRegular";
  font-size: 14px;
  text-transform: capitalize;
}

.input-group {
  display: flex;
}

.container-fluid {
  height: 100px;
}

.navbar {
  width: 37%;
  margin-bottom: 0 !important;
  min-height: 0px !important;
}

.search-panel-block {
  width: 40%;
}

img {
  max-width: 100%;
}

.menu-items__item {
  list-style-type: none;
}

.search-panel {
  padding-top: 34px;
}
.nofloat {
  float: none;
}
.agileheader-topbar-grid {
  margin-left: auto;
}

.nav > li > a {
  position: static;
  padding: 0;
}

.btn {
  width: 65px;
  background-color: #f10e34;
  border-color: #f10e34;
}

.glyphicon-search {
  color: #ffffff;
}
<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
          integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
          integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
          crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
  <div class="container-fluid">
    <div class="menu-logo">
      <img src="logo.jpg" alt="market-logo.jpg">
    </div>
    <nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
      <ul class="menu-items nav">
        <li class="menu-items__item"><a href="#" class="menu-items__link nav-link">My account</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Wishlist</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">My Cart</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Checkout</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Login</a></li>
      </ul>
    </nav>
    <div class="agileheader-topbar">
      <div class="container">
        <div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
          <form class="search-panel">
            <div class="input-group add-on">
              <input class="form-control" name="srch-term" type="text" placeholder="Search">
              <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>
</body>
</html>

3 个答案:

答案 0 :(得分：4)

这是由于div与“agileheader-topbar”类重写菜单。 使用以下代码。

<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right" style="z-index: 1;">

答案 1 :(得分：0)

<强>答案： 

.navbar {
  z-index: 1;
}

＆＃13;
＆＃13; 
body {
  margin: 0;
  padding: 0;
  font-family: "Arial, Helvetica, sans-serif,";
  font-size: 12px;
  font-weight: normal;
}

.header {
  background-color: #222222;
  height: 114px;
}
ul {
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-family: "MyradProRegular";
  font-size: 14px;
  text-transform: capitalize;
}

.input-group {
  display: flex;
}

.container-fluid {
  height: 100px;
}

.navbar {
  width: 37%;
  z-index: 1;
  margin-bottom: 0 !important;
  min-height: 0px !important;
}
＆＃13; 
<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
          integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
          integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
          crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
  <div class="container-fluid">
    <div class="menu-logo">
      <img src="logo.jpg" alt="market-logo.jpg">
    </div>
    <nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
      <ul class="menu-items nav">
        <li class="menu-items__item"><a href="#" class="menu-items__link nav-link">My account</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Wishlist</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">My Cart</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Checkout</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Login</a></li>
      </ul>
    </nav>
    <div class="agileheader-topbar">
      <div class="container">
        <div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
          <form class="search-panel">
            <div class="input-group add-on">
              <input class="form-control" name="srch-term" type="text" placeholder="Search">
              <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你的导航在另一个div元素下，所以当你鼠标输入导航项时，这实际上没有徘徊，它已经在另一个div元素（.agileheader-topbar）中盘旋。所以你试试这个CSS 

.agileheader-topbar { 
   width: 40; /*or is your needed */
}
相关问题
最新问题