Question

我想在导航栏中更改这些按钮的位置，我还想告诉我，我在CSS中做的是否正确。主要的想法是我想制作一个导航栏，我想知道我是怎么做的。

注意：关于按钮的位置，你可以看到我设置20 px到边距按钮（在我设置相对位置之前），但你可以看到没有任何事情发生。我想更多地移动按钮顶端。

我现在遇到的另一个疑问是，我该如何移动<a>标签或<li>或两者？

谢谢！

body {
  background-color: #fcf2e5;
  margin: 0;
}
nav {
  background-color: #beb8a4;
  height: 120px;
}
.menu {
  padding-left: 380px;
}

/* Nav Buttons */
.menu li {
  display: inline;
  font-family: sans-serif;
  font-size: 1.2em;
  padding-left: 40px;
  text-decoration: none;
}
.navButtons {
  text-decoration: none;
  color: black;
}
.navButtons:hover {
  color: #a52929;
}

/*I don't know if it's correct what I'm doing here below*/
ul,
li,
a {
  display: inline;
  position: relative;
  margin-bottom: 20px;
}

/* Logo */
header nav a img {
  margin-top: 20px;
  margin-left: 22px;
}

<header>
  <nav>
    <a href="#">
      <img src="Images/logo.png" title="Home" alt="Logo" />
    </a>
    <ul class="menu">
      <li><a href="#" class="navButtons">Quienes Somos</a>
      </li>
      <li><a href="#" class="navButtons">Muestras y Acabados</a>
      </li>
      <li><a href="#" class="navButtons">Ubicación</a>
      </li>
      <li><a href="#" class="navButtons">Contáctenos</a>
      </li>
    </ul>
  </nav>
</header>

Answer 1

这些天大多数导航栏看起来都像这样。非常少的标记和一些CSS使它看起来不错。

我使用flexbox进行定位。您可以使用此方法将事物放置在顶部或中心位置。

它也使用媒体查询，因此它可以应对一个小屏幕（该片段将有）按全屏幕在其状态之间切换。

body {
  background-color: #fcf2e5;
  margin: 0;
}

/* Start of navbar */
nav {
  background-color: #beb8a4;
  display: flex;
  padding: 15px 0;
  height: 100%;
  align-items: center;
  justify-content: space-around;
}

/* Nav buttons */
.navButtons {
  font-family: sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  color: black;
}
.navButtons:hover {
  color: #a52929;
}

/* Small screen support */
@media only screen and (max-width: 640px) {
  nav {
    flex-direction: column;
  }
  .navButtons {
    text-align: center;
    font-size: 1.6em;
    max-width: 180px;
    margin-top: 10px;
  }
}

<nav>
  <a href="#" class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/BBC_America.svg/100px-BBC_America.svg.png" title="Home" alt="Logo" /></a>
  <a href="#" class="navButtons">About us</a>
  <a href="#" class="navButtons">Samples and Finishes</a>
  <a href="#" class="navButtons">Find us</a>
  <a href="#" class="navButtons">Contact us</a>
</nav>

希望您觉得这很有帮助。

我无法改变这些元素的位置

1 个答案: