Question

好的，所以我将导航集中在我的一个主题中，但由于某种原因，即使复制并粘贴代码，我也无法复制相同的效果。

我尝试了使用显示：内联块，边距：0自动和文本对齐：中心的各种组合，但没有现在似乎有效。

我有什么遗失的吗？

Answer 1

它无效的原因是因为您将ul的宽度设置为100%如果您只是将其更改为auto它将起作用。

.main-navigation ul {
    display: inline-block;
    list-style: outside none none;
    margin: 0px auto;
    padding-left: 0px;
    text-align: center;
    width: auto; /* CHANGE THIS LINE */
}

Answer 2

只需删除列表项的float: left属性，然后将display: inline-block添加到列表项中，如下所示：

.main-navigation li {
  position: relative;
  padding: 0 10px;
  display: inline-block;
}

此外，您不需要ul的任何当前属性，因此请删除所有属性（包括宽度：100％）：

.main-navigation ul  {
  list-style: none; <<-- REMOVE THIS
  margin: 0 auto; <<-- REMOVE THIS
  padding-left: 0; <<-- REMOVE THIS
  text-align: center; <<-- REMOVE THIS
  width: 100%; <<-- REMOVE THIS
}

Answer 3

给你的菜单类一个100％，然后给你的.main-navigation ul一个设定的宽度。

.main{
width:100%;
}

并获得这个宽度的装备：

.main-navigation ul

为什么我不能集中导航？

3 个答案: