Question

我正在学习html / css，并且在对齐＆＃34;导航菜单时会出现以下问题＆＃34;向左转。有一个小的差距（见下面带有问号的图片）

有人可以告诉我如何消除左侧的差距吗？

enter image description here

这是我的html / css代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 200px;
    width: 800px;
    background-color: #CCC;
}
#navi {
    height: 50px;
    background-color: #036;
    width: 800px;
    margin: 0px;
    padding: 0px;
}
ul {
}
#content-area {
    height: 400px;
    width: 800px;
    background-color: #FFC;
}
#footer {
    height: 100px;
    width: 800px;
    background-color: #000;
}
h2 {
    color: #FFF;
    text-align: center;
    margin: 0px;
    padding-top: 50px;
}
h3 {
    color: #FFF;
    text-align: center;
    padding-top: 10px;
    margin: 0px;
}
p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 18px;
    padding: 10px;
    margin: 0px;
}
ul {
    list-style-type: none;
    margin: 0px;
}
li {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    display: block;
    font-size: 12px;
    margin-top: 10px;
    margin-right: 10px;
    float: left;
}
</style>
</head>

<body>

<div id="wrapper">
    <div id="header"><h2>This is the header</h2></div><!--header end--> 

        <div id="navi">
        <ul>
            <li>Facebook</li>
            <li>Twitter</li>
            <li>LinkdIn</li>
            <li>Google Plus</li>
        </ul>


        </div><!--navi end-->

    <div id="content-area"><p>Isn't saw evening shall open them had behold thing said evening i herb. Yielding kind second night image. Grass void green. Make Man given replenish brought. Spirit them seed fifth for living said his. Man abundantly.<br /><br />

Sixth yielding saying. Make female said they're night from fourth you'll make signs be. Our. Earth from. Replenish form living grass tree creepeth own. Had rule land from living, replenish appear the their days shall bearing waters moving seas living you, forth fourth.<br /><br />

Sixth whose stars i a. Creeping sea second above beast living signs created had first, face male dry our a his.</p></div>




<!--content area end-->

    <div id="footer"><h3>This is the Footer</h3></div><!--footer end-->

</div><!--wrapper end--> 
</body>
</html>

Answer 1

为padding:0;样式应用ul。

ul {
    list-style-type: none;
    margin: 0px;
    padding:0;
}

Answer 2

正在从默认用户代理样式表中应用空间。

您可以通过明确设置填充，<ul>到0的边距来删除它。

通常的做法是在整个文档中覆盖它，如

*{
 margin:0;
 padding:0;
}

Demo

Answer 3

Please check this

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

Answer 4

添加 ul{ padding:0; }

这将解决此问题。通常，您可以在CSS文件的顶部使用以下内容：

    *{
    padding:0;
    margin:0;
}

如果您在CSS顶部使用此代码段，则不会出现这些问题，默认填充等因浏览器而异。所以这会使它更加一致。

Answer 5

我无法看到您使用CSS 位置属性的位置？这非常有帮助。您也可以使用这些资源：

CSS Box model

CSS Padding

CSS Margin CSS Positioning

more CSS Positioning

您可以自己动手使用＆＃39;选择在实际行动中看到它。在代码的开头设置为零所有填充和边距是有帮助的，也是一种很好的做法，如下所示：

body{ padding:0; margin:0; }

Answer 6

我建议你避免漂浮和使用：

display: inline-block;

你也应该给你的ul id并将css设置应用到#ulid＆gt; li，这样你就可以避免你的其余部分获得菜单规则了。另外，我建议使用其他答案中建议的一些重置代码，这样你的CSS就不会包含默认的浏览器CSS规则。

这是我的修改：

    #ulmenu > li {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-size: 12px;
    display: inline-block;
    line-height: 50px;
    padding-left: 10px;
    padding-right: 0px;
    margin: 0px;
    }

    #ulmenu{
    margin:0px;
    padding:0px;
    list-style-type: none;
    }

</style>
</head>

<body>

<div id="wrapper">
    <div id="header"><h2>This is the header</h2></div><!--header end--> 

        <div id="navi">
        <ul id="ulmenu">
            <li>Facebook</li>
            <li>Twitter</li>
            <li>LinkdIn</li>
            <li>Google Plus</li>
        </ul>

Answer 7

我刚遇到同样的问题，所有的填充和边距已经为零，经过检查员的大量拖网后，我发现李有文字缩进

li{
 margin:0;
 padding:0;  
 text-indent:0;
}

解决了我的问题。

UL LI未与左对齐

7 个答案: