Question

我想把我的导航栏放到中心，图片留给导航栏（就像图像一样）我制作容器时遇到麻烦（也就像例子一样）我该怎么编码呢？ example

＆＃13;

img {
  width: 300px;
  height: 90px; 
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #fff;
}


li {
  float: left;
  border-right:1px solid #bbb;
  border-color: #87CEFA;
}

li:last-child {
  border-right: none;
}


li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF51;
}

＆＃13;

<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" alt:Nintendo Logo>

<ul>
  <li><a href="A.html">A</a></li>
  <li><a href="B.html">B</a></li>
  <li><a href="c.html">C</a></li>
  <li><a href="D.html">D</a></li>
  <li><a href="E.html">E</a></li> 
</ul>

＆＃13;

（我没有制作任天堂网站，我只是用它作为例子）

Answer 1

使用flexbox，您可以在两个元素中添加一个容器，并将它们对齐到中间。

＆＃13;

img {
  width: 300px;
  height: 90px;

}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #fff;
}


li {
    float: left;
    border-right:1px solid #bbb;
    border-color: #87CEFA   ;

}

li:last-child {
    border-right: none;
}


li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF51;
}

.container{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

＆＃13;

<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />

<ul>
  <li><a href="A.html">A</a></li>
  <li><a href="B.html">B</a></li>
  <li><a href="c.html">C</a></li>
  <li><a href="D.html">D</a></li>
  <li><a href="E.html">E</a></li> 

</ul>
</div>

＆＃13;

Answer 2

这个怎么样？基本上将图像和ul包装在容器div中并放置display：flex;在它上面：

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

img {
  width: 300px;
  height: 90px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #fff;
}

li {
  float: left;
  border-right: 1px solid #bbb;
  border-color: #87CEFA;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF51;
}

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>

  <body>
    <nav>
      <img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" alt:Nintendo Logo>

      <ul>
        <li><a href="A.html">A</a></li>
        <li><a href="B.html">B</a></li>
        <li><a href="c.html">C</a></li>
        <li><a href="D.html">D</a></li>
        <li><a href="E.html">E</a></li>

      </ul>
    </nav>

  </body>

</html>

如何使导航栏居中并制作这样的容器？

2 个答案: