妖風習習 发表于 2021-4-17 18:23:37

css样式浮动不会紧贴左边部分是为什么

<html>
<head>
<title>导航条练习</title>
<style type="text/css">
.*{
margin:0;
padding:0;
}

.nav{
list-style:none;
background-color:PowderBlue;
width:1000px;
margin:50px auto;

}
.nav li{
float:left;
width:25%;

}

.nav li a{
display:block;
width:100%;
margin:0 auto;
padding:5px 0;
text-align:center;
text-decoration:none;
}
a:hover{
background-color:Coral;

}
.clearfix:after{
content:"";
display:block;
clear:both;

}

</style>

</head>
<body>
<ul class="nav clearfix">
<li><a href=#>首页</a>
<li><a href=#>我们</a>
<li><a href=#>刷新</a>
<li><a href=#>联系</a>
</ul>
</body>   
<html>

忆难忘 发表于 2021-4-23 00:30:44

如果您不想解决旧项目遗留下来的问题，建议使用Flex或Gird布局

周良雄 发表于 2021-4-27 13:03:22

.nav{
list-style:none;
background-color:PowderBlue;
width:1000px;
margin:50px auto;
<span style="color: #FF0000;">padding:0;</span>
}

情缘殇偉少 发表于 2021-5-2 02:16:35

<html>

<head>
    <title>导航条练习</title>
    <style type="text/css">
      * {
            margin: 0;
            padding: 0;
      }
         
      a {
            text-decoration: none;
      }
         
      .nav {
            list-style: none;
            width: 1000px;
            margin: 50px auto;
            display: flex;
            justify-content: space-between;
      }
         
      .item {
            background-color: PowderBlue;
            text-align: center;
            padding: 5px;
            width: 25%;
      }
         
      .item:hover {
            background-color: rgb(190, 226, 89);
      }
    </style>

</head>

<body>
    <ul class="nav">
      <li class="item"><a href=#>首页</a></li>
      <li class="item"><a href=#>我们</a></li>
      <li class="item"><a href=#>刷新</a></li>
      <li class="item"><a href=#>联系</a></li>
    </ul>
</body>
<html>

来啊互喷啊 发表于 2021-5-9 10:01:32

<html>
<head>
<title>导航条练习</title>
<style type="text/css">
.*{
margin:0;
padding:0;
}

.nav{
list-style:none;
background-color:orangered;
width:1000px;
margin:50px auto;
float:left;
}
.nav li{
float:left;
width:25%;

}

.nav li a{
display:block;
width:100%;
margin:0 auto;
padding:5px 0;
text-align:center;
text-decoration:none;
}
a:hover{
background-color:Coral;

}
.clearfix:after{
content:"";
display:block;
clear:both;

}

</style>

</head>
<body>
<ul class="nav clearfix">
<li><a href=#>a</a>
<li><a href=#>b</a>
<li><a href=#>c</a>
<li><a href=#>d</a>
</ul>
</body>   
<html>
稍微修改了一下你的代码，只需要在nav选择器中添加属性float:left;就可以解决了

真的勇士 发表于 2021-5-10 15:22:02

您可以在浏览器中右键单击并进行检查。然后转到主页上的方框。一般来说，你可以通过改变边距和填充来移动位置，这也是一个相对较小的白色练习。
您可以调整浏览器活动面板中的数据，直到您认为没问题为止，然后返回到环境软件(DW或Sublime)来修改它

江南云鹤 发表于 2021-5-19 01:53:21

会不会是因为body标签的内边距或外边距？可以试试
页: [1]
查看完整版本: css样式浮动不会紧贴左边部分是为什么