Question

我有一个无序列表，我正在使用它作为一个简单的导航栏。如下所示：

enter image description here

正如您所看到的那样，<li>元素并未在<div>左侧对齐它们。我在包含text-align: left;中尝试了<div>但这似乎没有效果。

相关HTML：

<div id="menu">                                                                         
    <div id="menutop">                                                                  
        <ul>                                                                            
            <li><a href="#">Home</a></li>                                               
            <li><a href="#">About</a></li>                                              
        </ul>                                                                           
    </div>

相关CSS：

#menu {
    width: 800px;
    margin: 0 auto;
}

#menu div {
    float: left;
    width: 400px;
    height: 60px;
    background-color: #CACACA;
}

#menutop {
    text-align: left;
}

#menutop ul {
    list-style: none;
}

#menutop li {
   display: inline;
   padding: 10px;
}

#menutop a {
    color: #000000;
    text-decoration: none;
}

#menutop a:hover {
    text-decoration: underline;
}

有什么想法吗？

Answer 1

默认情况下，

ul和li具有边距或填充，具体取决于浏览器。您需要在菜单中覆盖此默认样式：

#menu ul, #menu li {
    margin: 0; padding: 0;
}

查看演示here

^{注意：默认情况下，jsfiddles执行CSS重置，因此并不总是非常适合测试此类事情。确保禁用＆＃34;规范化CSS＆＃34;在寻找这种错误时。}

Answer 2

设置填充，边距0px，

#menutop ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

Demo

http://jsfiddle.net/tQb75/

Answer 3

尝试使用 CSS Reset 。

最简单的形式是：

* { margin: 0; padding: 0; }

Answer 4

你可以直接覆盖ul和li填充和边距。

这个简单的代码：

.menu ul, .menu li{
   margin:0;
   padding:0;
}

Answer 5

您可以删除菜单的边距和填充

#menu *{
margin:0;
padding:0;
}

Answer 6

<ul>元素左对齐，但<li>元素的padding-left元素设置为10px。这就是为什么第一个元素略微向右。

Answer 7

我创建了一个div，其文本左对齐，然后给该div边距-x auto。这样，div将水平居中。该div中的所有ul都会自动对齐并居中。我正在使用Bootstrap类。

size_t found = strFullPathName.find_last_of("/\\");
if (found != string::npos)
{
    //Find us the filename, and return in correct format.
    strFullPathName = strFullPathName.substr(found+1);
    found = strFullPathName.rfind(".");
    if (found != string::npos)
        strFullPathName = strFullPathName.substr(0, found);
    strFullPathName = szCurDir + "\\output\\" + strFullPathName + ".file001";
}

无序列表未在div中一直向左对齐

7 个答案: