Question

所以我正在为我的网站制作一个导航栏，我试图将所有内容均匀地放在栏中，但由于某种原因，我无法让事情平稳地解决。边缘不起作用，或者它们不起作用但并非一直如此，并且它变得非常令人沮丧。这是我的代码：

body {
  margin: 0 px;
  font - family: Helvetica;
}
.navbar {
  background - color: grey;
  width: 100 % ;
  height: 70 px;
  text - align: center;
}
.items li {
  display: inline - block;
  padding - left: 50 px;
}
.items a {
  text - decoration: none;
  color: #333;
     font-weight: bold;
     font-size: 20px;
     padding-top: -25px;
    }

<body>
  <div class="navbar">
    <div class="items">
      <img src="logo1.png" style="height:55px;padding-top:7.5px;">
      <li><a href="apparel.html">Apparel</a></li>
      <li><a href="ea.html">Equipment & Accessories</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </div>
  </div>
</body>

Answer 1

注意：请在整页中查看！

＆＃13;

body {
  margin: 0px;
  font-family: Helvetica;
}
.navbar {
 background-color: grey;
 width: 100%;
 height: 70px;
 text-align: center;
 position: relative;
}

.items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.items li {
 display: inline-block;
 padding-left: 50px;
}
.items a {
 text-decoration: none;
 color: #333;
 font-weight: bold;
 font-size: 20px;
 display: block;
}

＆＃13;

<div class="navbar">
 <div class="items">
  <img src="logo1.png" style="height:55px;padding-top:7.5px;">
  <li><a href="apparel.html">Apparel</a></li>
  <li><a href="ea.html">Equipment & Accessories</a></li>
  <li><a href="contact.html">Contact Us</a></li>
 </div>
</div>

＆＃13;

Answer 2

要使徽标垂直居中，请使用vertical-align:middle;。

此外，如果您设置了保证金或填充，请不要将其设置为<a>，因为它是具有inline属性的项目，但在li项目上设置了是内联块。

除此之外，在没有li容器的情况下编写ul个项目也很奇怪。

＆＃13;

body {
  margin: 0px;
  font-family: Helvetica;
}
.navbar {
  background-color: grey;
  width: 100% ;
  height: 70px;
  text-align: center;
}

.items img
{
vertical-align:middle;
}

.items li {
  display: inline-block;
  vertical-align:middle;
  padding-left: 50px;
}
.items a {
  text-decoration: none;
  color: #333;
     font-weight: bold;
     font-size: 20px;
    }

＆＃13;

<body>
  <div class="navbar">
    <div class="items">
      <img src="logo1.png" style="height:55px;padding-top:7.5px;">
      <li><a href="apparel.html">Apparel</a></li>
      <li><a href="ea.html">Equipment & Accessories</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </div>
  </div>
</body>

＆＃13;

如何使用CSS在内联元素上单独使用边距？

2 个答案: