Question

我用CSS的相对基本知识打了一堵墙。我把一个菜单放在一起，意图将它集中在它的div中。无论出于何种原因，所有以CSS 为中心的尝试（边距为0和设置菜单ID的宽度）都失败，所以我已经决定将div的宽度更改为只是几乎不适合所有的菜单选项，并在页面上居中。

然而，这导致它在几个浏览器（主要是Safari）中显示不正确。

继承人CSS：

#primary_nav_wrap {
  display: block;
}

#primary_nav_wrap ul {
  list-style: none;
  text-align: center;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul a {
  display: block;
  margin: 0 auto;
  color: #8a7e70;
  text-decoration: none;
  font-size: 13.9pt;
  padding: 0 10px;
  letter-spacing: 2px;
  font-family: Engravers;
}

#primary_nav_wrap ul li {
  display: inline;
  position: relative;
  float: left;
  padding: 0
}

#primary_nav_wrap ul ul {
  display: none;
  width: 204px;
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(0, 0, 0, 0.92);
  margin-left: -100px
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 204px
}

#primary_nav_wrap ul ul a {
  font-family: Eavesregular;
  font-size: 12pt;
  letter-spacing: .5px !important;
  line-height: 120%;
  padding: 5px 5px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

a:hover,
a:active,
li:hover,
li:active,
ul:hover,
ul:active {
  color: #bfb3a0 !important;
}

和我的HTML

<div id="primary_nav_wrap">
  <ul>
    <li><a href="/wild/philosophy"><span style="color:#fffdf2;">philosophy</span></a></li>
    <li><a href="/wild/shadesofblack">collection</a>
      <ul>
        <li><a href="/wild/shadesofblack">Shades of Black</a></li>
        <li><a href="/wild/lamourdusauvage">L' Amour du Sauvage</a></li>
        <li><a href="/wild/darkphoenix">Dark Phoenix</a></li>
        <li><a href="/wild/buy">Buy the Collections</a></li>
      </ul>
    </li>
    <li><a href="/wild/grandcentral">fashionshow</a>
      <ul>
        <li><a href="/wild/grandcentral">Phoenix New York<br />Grand Central Station</a></li>
      </ul>
    </li>
    <li><a href="/wild/press">press</a>
    </li>
    <li><a href="/wild/blog">blog</a></li>
    <li><a class="lastcontact" href="/wild/contact">contact</a></li>
  </ul>
</div>

这是网站：

https://christianpersi.co/wild/

感谢您的帮助！

Answer 1

看一下使用flex来定位元素。

默认情况下，flex会将您的项目连续渲染，您可以设置justify-content：center;将所有中心对齐间距。您可以将菜单的父级置于中心，并在ul的内部使用菜单justify-content：space-between;将它们均匀地分隔开来，但正如@Bhargav所指出的那样，你的问题可能是你的菜单中的字符数量下降，打破布局的宽度有限。

麻烦在div中的CSS列表菜单居中

1 个答案: