CSS浮动样式_Css_Css Float - Fatal编程技术网

CSS浮动样式

css

CSS浮动样式,css,css-float,Css,Css Float,我有以下代码： <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;

我有以下代码：

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


分区菜单
{
浮动：左；
}
分区菜单
{
边框样式：实心；
边框宽度：2倍；
浮动：左；
}
李梅努特姆分区
{
浮动：左；
保证金：5px；
颜色：红色；
背景：绿色；
填充物：5px；
}
li.menuitem分区：悬停{
背景：黄色；
}

首先
第二
第三

结果如下：

是什么导致了“第一”左边的空白

谢谢。

ul

默认情况下会在左侧创建一些填充空间

li ul{
    padding:0;
}

ul

默认情况下会在左侧创建一些填充空间

li ul{
    padding:0;
}

我认为这是因为浏览器的默认样式。
你可以用手术室

您需要应用

列表样式：none

并将任何填充/边距重置为

ul

。因此，

ul

的风格变成：

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

您需要应用

列表样式：无

，并将任何填充/边距重置为

ul

。因此，

ul

的风格变成：

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

添加

填充：0px到您的菜单
类
添加填充：0px到您的.menu
类
浏览器通常会向和元素添加填充。您可以在Chrome上设置-webkit padding start
，但在
元素上使用padding left:0
或padding:0
可能更容易。还要注意-webkit页边距在之前和之后
您可能还需要设置：列表样式类型：无

浏览器通常会在
和
元素中添加填充。您可以在Chrome上设置-webkit padding start
，但在
元素上使用padding left:0
或padding:0
可能更容易。还要注意-webkit页边距在之前和之后
您可能还需要设置：列表样式类型：无

您应该添加
padding: 0px; 

到你的分区菜单
所以看起来是这样的：
div ul.menu 
{
    border-style:solid;
    border-width:2px;
    float:left;
    padding: 0px;
}

你应该加上
padding: 0px; 

到你的分区菜单
所以看起来是这样的：
div ul.menu 
{
    border-style:solid;
    border-width:2px;
    float:left;
    padding: 0px;
}

本机浏览器属性在左侧为任何ul
提供一个填充。尝试给出填充：0
到ul
。本机浏览器属性在左侧给任何ul
一个填充。尝试给出填充：0至ul
。