Html UL LI未与左侧对齐_Html_Css

Html UL LI未与左侧对齐

html css

Html UL LI未与左侧对齐,html,css,Html,Css,我正在学习html/css，在将导航菜单向左对齐时出现以下问题。有一个小缺口，请看下面带有问号的图片有人能告诉我如何消除左侧的间隙吗这是我的html/css代码应用填充：0；适合你的ul风格正在从默认用户代理样式表应用空间您可以通过显式地将padding，margin设置为0来删除它通常的做法是在整个文档中覆盖它，如 *{ margin:0; padding:0; } 加保险商实验室{ 填充：0； } 这将解决这个问题。通常，您可以在CSS文件的顶部使用以下内容：

我正在学习html/css，在将导航菜单向左对齐时出现以下问题。有一个小缺口，请看下面带有问号的图片

有人能告诉我如何消除左侧的间隙吗

这是我的html/css代码

应用填充：0；适合你的ul风格

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

您可以通过显式地将padding，margin设置为0来删除它

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

*{
 margin:0;
 padding:0;
}

加保险商实验室{ 填充：0； }

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

    *{
    padding:0;
    margin:0;
}

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

我看不出您在哪里使用CSS位置属性？这很有帮助。您还可以使用以下资源：

您可以使用“自己尝试”选项来查看实际操作。在代码开始时将所有填充和边距设置为零是很有帮助的，也是一种很好的做法，如下所示：

身体{ 填充：0；保证金：0；

}

我建议您避免漂浮，并使用：

display: inline-block;

此外，您还应该提供ulid并将css设置应用于该ulid>li，这样您就可以避免使用其他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>

我刚刚遇到了同一个问题，所有的填充和边距都已经为零，在检查人员仔细检查之后，我注意到li上有文本缩进

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

修复了我的问题。

我希望标题中包含normalize.css。在浏览器中使用firefox或chrome是吗？在导航栏上单击鼠标右键，然后选择“检查图元…”。。。现在，您可以查看上面的样式，并查看哪个样式添加了左填充。谷歌更多信息那是什么？？你能解释一下吗？谢谢，我一定会查出来的。@JannetMackenzie那么请选择这篇文章作为答案

display: inline-block;

    #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>

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