Question

我有以下代码：

<html>

<head>

<style>

div.menu
{
    float:left;
}

div ul.menu 
{
    border-style:solid;
    border-width:2px;
    float:left;
}

div li.menuitem
{
    float:left;
    margin:5px;
    color:red;
    background:green;
    padding:5px;
}

div li.menuitem:hover{
    background:yellow;
}

</style>

</head>

<body>

<div class="menu">
    <ul class="menu">
    <li class="menuitem"> first </li>
    <li class="menuitem"> second </li>
    <li class="menuitem"> third </li>
    </ul>
</div>

</body>

</html>

结果如下：

enter image description here

导致“第一个”左边的差距是什么？

感谢。

Answer 1

默认情况下，

ul会在左侧创建一些填充空间。

li ul{
    padding:0;
}

JSFiddle

Answer 2

我认为这是因为浏览器的默认样式您可以使用css-reset或normalize.css。

* {
    margin:0;
    padding:0;
}

Answer 3

浏览器通常会向<ul>和<ol>元素添加填充。您可以在Chrome上设置-webkit-padding-start，但在padding-left: 0元素上使用padding: 0或<ul>可能会更容易。另请注意-webkit-margin-before和after。

您可能还想设置：list-style-type: none

http://jsfiddle.net/7n4Xn/1

Answer 4

您需要应用list-style:none并将所有填充/边距重置为ul。因此ul的样式变为：

div ul.menu {
    border-style:solid;
    border-width:2px;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}

<强> Here's a demo

Answer 5

将padding: 0px;添加到您的.menu班级

Answer 6

你应该添加

padding: 0px;

到您的div ul.menu

所以它看起来像这样：

div ul.menu 
{
    border-style:solid;
    border-width:2px;
    float:left;
    padding: 0px;
}

CSS浮动样式

6 个答案: