如何使水平导航列表在照片顶部居中

How to center a horizontal nav list on top of a photo

提问人：yuusticia 提问时间：9/19/2023 最后编辑：isherwoodyuusticia 更新时间：9/19/2023 访问量：33

问：

我要么组织了我的 HTML，要么我的 CSS 中的某些东西阻止了导航栏居中。我想知道如何解决这个问题，以及这个问题的原因可能是什么。

它需要是什么样子 vs 它看起来像什么

enter image description here

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  margin-bottom: 20px;
}

.wrapper,
.map-bg {
  position: relative;
  background-color: rgb(94, 81, 81);
  max-width: 100%;
  max-height: 580px;
  padding-bottom: 10px;
}

.wrapper {
  overflow: hidden;
}

.map-bgimg {
  position: absolute;
  opacity: 0.40;
  width: 100%;
  height: 100%;
  height: 580px;
  object-fit: cover;
  filter: invert(1);
}

.uppertext {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  text-align: right;
}

.homelist {
  display: inline;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.homelist ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  width: 70%;
  min-height: 20px;
  margin-top: 20px;
}

.homelist li {
  margin-top: 15px;
  padding: 10px;
  border-right: 1px solid rgb(255, 255, 255);
  padding: 0 0.9rem;
  min-width: 2rem;
  text-align: center;
}

.homelist li a {
  display: inline;
  color: white;
  text-decoration: none;
}

.homelist li a:hover {
  color: rgb(202, 205, 50);
}

.shipping {
  color: white;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  vertical-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.shipping img {
  float: right;
  padding: 5px;
}

.truck {
  max-width: 40px;
  margin-top: 10px;
}

.pear-bgimg {
  width: 100%;
  max-height: 500px;
  border: 1px solid rgb(255, 0, 0);
  border-collapse: collapse;
  text-align: center;
}

.pear-img {
  width: 90%;
  z-index: 0;
}

.wrapper2 {
  position: relative;
  border: 1px solid rgb(85, 0, 255);
  border-collapse: collapse;
}

.navlist {
  border: 1px solid rgb(255, 0, 0);
  border-collapse: collapse;
  background-color: rgb(49, 41, 40);
  opacity: 0.95;
  padding-top: 20px;
  list-style: none;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
}

.navlist ul {
  border: 1px solid rgb(0, 255, 13);
  border-collapse: collapse;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.navlist ul li a {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  text-decoration: none;
  color: white;
}

.navlist ul li a:hover {
  color: rgb(244, 227, 76);
}

.navlist ul li {
  display: inline-block;
  color: white;
  padding: 0px 10px 0px 10px;
}

.searchwrap {
  float: right;
  text-align: center;
  margin-right: 25px;
}

.searchbar {
  width: 350px;
  height: 30px;
  border: 5px solid rgb(127, 121, 121);
  font-style: italic;
  padding-right: 35px;
  -webkit-box-shadow: 0 1.5 10px 0 #000000;
  -moz-box-shadow: 0 1.5 10px 0 #000000;
  box-shadow: 0 1.5 10px 0 #000000;
}

.searchbarimg {
  float: right;
  width: 30px;
}
<header>
  <div class="wrapper">
    <div class="map-bg">
      <img class="map-bgimg" src="https://postimg.cc/GB3prksT">
    </div>

    <div class="uppertext">
      <div class="homelist">
        <ul style="list-style-type: none;">
          <li><a href="#">Login</a></li>
          <li><a href="#">Register</a></li>
          <li><a href="#">Your Account</a></li>
          <li><a href="#">Shopping cart</a></li>
          <li><a href="#">Check out</a></li>
        </ul>

        <div class="shipping">
          <img class="truck" src="https://postimg.cc/p9ytqkFC">
          <p>FREE SHIPPING FOR ORDER OVER 299$<br><i>email: [email protected] | Tel:(04)123456789</i>
          </p>
        </div>
      </div>
    </div>

    <div class="wrapper2">
      <div class="pear-bgimg">
        <nav class="navlist">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Decor</a></li>
            <li><a href="#">Lighting</a></li>
            <li><a href="#">Tiles</a></li>
            <li><a href="#">Heating</a></li>
            <li><a href="#">Exterior & Garden</a></li>
            <li><a href="#">Glass</a></li>

            <span class="searchwrap" style="border: 5px solid #DDD;">
              <input type="text" class="searchbar" placeholder="Search Product or Item" style="border: none;">
              <img class="searchbarimg" src="icon.png"/>
            </span>
          </ul>
        </nav>
        
        <img class="pear-img" src="https://postimg.cc/4mxSTyW2">
      </div>
    </div>
  </div>
</header>

HTML CSS 居中

评论

3赞 isherwood 9/19/2023
你应该使用一个好的编辑器或HTML验证器。span 元素不是 list 元素的有效子元素。

答：

0赞 Chris Barr 9/19/2023 #1

看看这是否有效。我通过我更改的内容在 CSS 中发表了评论。

  • 添加以使其拉伸整个宽度right: 0.navlist
  • 删除了 from，以便它可以扩展以在一行中实际显示所有内容max-width: 800px.navlist ul
  • 将元素从 a 更改为 an，否则 HTML 无效。列表只能包含列表项。.searchwrap<span><li>

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  margin-bottom: 20px;
}

.wrapper,
.map-bg {
  position: relative;
  background-color: rgb(94, 81, 81);
  max-width: 100%;
  max-height: 580px;
  padding-bottom: 10px;
}

.wrapper {
  overflow: hidden;
}

.map-bgimg {
  position: absolute;
  opacity: 0.40;
  width: 100%;
  height: 100%;
  height: 580px;
  object-fit: cover;
  filter: invert(1);
}

.uppertext {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  text-align: right;
}

.homelist {
  display: inline;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.homelist ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  width: 70%;
  min-height: 20px;
  margin-top: 20px;
}

.homelist li {
  margin-top: 15px;
  padding: 10px;
  border-right: 1px solid rgb(255, 255, 255);
  padding: 0 0.9rem;
  min-width: 2rem;
  text-align: center;
}

.homelist li a {
  display: inline;
  color: white;
  text-decoration: none;
}

.homelist li a:hover {
  color: rgb(202, 205, 50);
}

.shipping {
  color: white;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  vertical-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.shipping img {
  float: right;
  padding: 5px;
}

.truck {
  max-width: 40px;
  margin-top: 10px;
}

.pear-bgimg {
  width: 100%;
  max-height: 500px;
  border: 1px solid rgb(255, 0, 0);
  border-collapse: collapse;
  text-align: center;
}

.pear-img {
  width: 90%;
  z-index: 0;
}

.wrapper2 {
  position: relative;
  border: 1px solid rgb(85, 0, 255);
  border-collapse: collapse;
}

.navlist {
  border: 1px solid rgb(255, 0, 0);
  border-collapse: collapse;
  background-color: rgb(49, 41, 40);
  opacity: 0.95;
  padding-top: 20px;
  list-style: none;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0; /* <--- ADDED */
}

.navlist ul {
  border: 1px solid rgb(0, 255, 13);
  border-collapse: collapse;
  /*max-width: 800px;*/ /* <--- REMOVED */
  margin-right: auto;
  margin-left: auto;
}

.navlist ul li a {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  text-decoration: none;
  color: white;
}

.navlist ul li a:hover {
  color: rgb(244, 227, 76);
}

.navlist ul li {
  display: inline-block;
  color: white;
  padding: 0px 10px 0px 10px;
}

.searchwrap {
  float: right;
  text-align: center;
  margin-right: 25px;
}

.searchbar {
  width: 350px;
  height: 30px;
  border: 5px solid rgb(127, 121, 121);
  font-style: italic;
  padding-right: 35px;
  -webkit-box-shadow: 0 1.5 10px 0 #000000;
  -moz-box-shadow: 0 1.5 10px 0 #000000;
  box-shadow: 0 1.5 10px 0 #000000;
}

.searchbarimg {
  float: right;
  width: 30px;
}
<header>
  <div class="wrapper">

    <div class="map-bg">
      <img class="map-bgimg" src="https://postimg.cc/GB3prksT">
    </div>

    <div class="uppertext">
      <div class="homelist">
        <ul style="list-style-type: none;">
          <li><a href="#">Login</a></li>
          <li><a href="#">Register</a></li>
          <li><a href="#">Your Account</a></li>
          <li><a href="#">Shopping cart</a></li>
          <li><a href="#">Check out</a></li>
        </ul>

        <div class="shipping">
          <img class="truck" src="https://postimg.cc/p9ytqkFC">
          <p>FREE SHIPPING FOR ORDER OVER 299$<br><i>email: [email protected] | Tel:(04)123456789</i>
          </p>
        </div>
      </div>
    </div>

    <div class="wrapper2">
      <div class="pear-bgimg">
        <nav class="navlist">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Decor</a></li>
            <li><a href="#">Lighting</a></li>
            <li><a href="#">Tiles</a></li>
            <li><a href="#">Heating</a></li>
            <li><a href="#">Exterior & Garden</a></li>
            <li><a href="#">Glass</a></li>

            <li class="searchwrap" style="border: 5px solid #DDD;">
                <input type="text" class="searchbar" placeholder="Search Product or Item" style="border: none;">
                <img class="searchbarimg" src="icon.png"/>
            </li>

          </ul>
        </nav>
        <img class="pear-img" src="https://postimg.cc/4mxSTyW2">
      </div>
    </div>
  </div>
</header>

上一个：将文本居中在各自的图像上并分割图像，值

下一个：如何在CSS中将div水平居中[复制]