Question

HTML新手，想知道如何让导航栏看起来更好一点，我不明白怎么做。寻找任何人帮助

.navigation-bar {
  height: 32px;
  width: 100%;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 430px;
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  height: 15px;
  display: inline;
}

.navigation-bar li a {
  color: #fff;
  background-color: #000;
  font-size: 12px;
  text-transform: uppercase;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  padding-right: 1em;
  padding-left: 1em;
  line-height: 2em;
  margin-right: 16px;
}

.navigation-bar li:first-child {
  margin-left: 20px;
  border: #000;
}

.navigation-bar li a:hover {
  background-color: #e60000;
  transition: .7s background-color;
}

<div class="navigation-bar">
  <div id="navigation-container" class="cf">
    <ul>
      <li><a href="Index.html">Home</a></li>
      <li><a href="About.html">About DRC</a></li>
      <li><a href="Products.html">Our Products</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </div>
</div>

我希望每条“链接”都用一条细白线分开，我希望当你将鼠标悬停在它上面时变成红色的区域变大，这样它就会填充“链接”所在的小部分。感谢有帮助的人

Answer 1

您可以这样做：

.navigation-bar {
  width:100%;
  text-align:center;
}

.navigation-bar ul {
  padding: 0px;
  text-align: center;
  margin: 0px auto;
  display: inline-block;
}

.navigation-bar ul:after {
  content: "";
  clear:both;
  display:table;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  float: left;
  display: inline-block;
  position: relative;
}

.navigation-bar li:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 100%;
    background: #333;
  z-index:1;
}

.navigation-bar li:last-child:after {
    content: "";
  display:none;
}

.navigation-bar li a {
  color: #fff;
  background-color: #000;
  font-size: 12px;
  text-transform: uppercase;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  padding: 1em 2em;
  line-height: 2em;
  display: inline-block;
  margin:0px;
}

.navigation-bar li a:hover {
  background-color: #e60000;
  transition: .5s background-color;
}

<div class="navigation-bar">
  <div id="navigation-container" class="cf">
    <ul>
      <li><a href="Index.html">Home</a></li>
      <li><a href="About.html">About DRC</a></li>
      <li><a href="Products.html">Our Products</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </div>
</div>

然而，我可能会使用新的css3 flexbox来做这种事情。

Answer 2

除非你真的需要，否则你不需要设定身高要使链接更大，请添加更多填充制作li的内联块，并且锚块（或内联块也应该起作用）。
在每个项目之间做一条细线。使用右边框，但用.navigation-bar { /*height: 32px;*/ width: 100%; } .navigation-bar ul { padding: 0px; margin: 0px; text-align: center; width: 430px; /*background-color: #000;*/ margin-left: auto; margin-right: auto; } .navigation-bar li { list-style-type: none; padding: 0px; /*height: 15px;*/ display: inline-block; } .navigation-bar li a { color: #fff; background-color: #000; font-size: 12px; text-transform: uppercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration: none; padding: 1em; /*line-height: 2em;*/ /*margin-right: 16px;*/ display: block; } /*.navigation-bar li:first-child { margin-left: 20px; border: #000; }*/ .navigation-bar li a:hover { background-color: #e60000; transition: .7s background-color; } .navigation-bar li:not(:last-child) { border-right: 1px solid #333; }排除最后一个元素（我们不需要在那里有一条线）。

＆＃13;

<div class="navigation-bar">
  <div id="navigation-container" class="cf">
    <ul>
      <li><a href="Index.html">Home</a>
      <li><a href="About.html">About DRC</a>
      <li><a href="Products.html">Our Products</a>
      <li><a href="Contact.html">Contact</a>
    </ul>
  </div>
</div>

＆＃13;

'ignore_sticky_posts' => 1

＆＃13;

如何微调这个导航栏？

2 个答案: