Question

我想在没有居中子菜单的情况下居中菜单，这是我的代码：

<ul class="drop_menu">
<li><a href="#">Home</a></li>
<li><a href="#">hhh</a>
    <ul class="sub_drop_menu">
         <li><a href="#">Home</a></li> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Home</a></li> 
    </ul>
</li>
</ul>

这是我正在使用的CSS：

 .drop_menu {
    list-style-type:none;
    height:30px;
    }
    .drop_menu > li { 
      float:left; 
      font-weight: bold;  
      font-size: 16px;  
    }
    ul.drop_menu > li {
        text-align: center;  
    }

Answer 1

将此css添加到您的代码中希望它能正常工作

.sub_drop_menu li {
    text-align: left;  
}

Answer 2

CSS如何工作

＆＃34;层叠＆＃34;样式表。

a＆＃34;规则＆＃34; - 一个选择器，然后是一个或多个＆＃34;声明＆＃34;财产和价值。

.your-selector {
    property: value;
}

从右到左阅读......

.menu li {
    text-align: center;
}

＆＃34;任何（和所有）li - 在.menu --- text-align：center;

这意味着你的.sub-menu的li将成为文本对齐中心，因为它是.menu中的li。 ---你制定了规则。

在这种情况下，你可以做两件事之一。

.sub-menu li { /* this overrides the "cascading" rule from before */
    text-align: right;
}

或

.menu > li {
    text-align: center;
}

这意味着，第一层的所有li--.menu的第一个孩子

这是a jsFiddle

如何在没有居中子菜单的情况下居中菜单li

2 个答案:

CSS如何工作