盒子模型填充问题
0
悬赏园豆：20
[已解决问题]
解决于 2020-06-02 14:41
元素ul左填充40不知道是哪里来的，想要把它去掉。麻烦了半天也不知道什么原因。
麻烦各位了。
html:
<!DOCTYPE html>
<html>
<head>
<title>Rosebud7</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/web_bg.css"/>
<link rel="stylesheet" type="text/css" href="/css/index.css"/>
<style>
#container{
width:100%;
margin:0px auto;
}
#top{
width:100%;
height:100px;
}
#logo{
width:100%;
height:300px;
text-align:center;
}
#footbar
{
width:20%;
height:50px;
margin:0px auto;
border:2px blue solid;
}
</style>
</head>
<body class="snowflake">
<div id="container">
<div id="top">
<h1 style="background-color:rgba(0,0,0,0.5);text-align:center;color:white">Welcome to my website</h1>
</div>
<div id="logo">
<p style="color:white;font-size:70px;text-align:center"><br/>
<strong>MY WEBSITE</strong>
</p>
</div>
<div id="menu_container">
<ul>
<li><a href="article.html">article</a></li>
<li><a href="index2.html">index2</a></li>
</ul>
</div>
<!--div id="footbar"><p style="color:white align:center" >2020- All rights reserved</p></div-->
</div>
</body>
</html>
css:
/菜单栏/
menu_container
{
height:50px;
}
menu_container ul{
margin:0px 0px;
list-style-type:none;
overflow:hidden;
text-align:center;
border:1px blue solid;
}
menu_container ul li{
list-style-type:none;
margin:0px 20px 0px 20px;
padding:0px 0px 0px 0px;
border:1px green solid;
display:inline;
}
menu_container ul li a{
color:white;
text-decoration:none;
}
menu_container ul li:hover{
background-color:gray;
}
最佳答案
1
那是浏览器默认的样式，在设置中开启就可以看到了。
收获园豆：20
谢谢，确实是这个问题，非常感谢。
其他回答(4)
0
可能是浏览器自带样式吧。试试这个：https://github.com/necolas/normalize.css
建议格式化一下代码，这个编辑器支持markdown
谢谢，确实是这个问题。非常感谢。
0
menu_container ul{
padding-left: 0;
}
0
查看第二栏的计算值就知道怎么来的。。。
0
只能padding了
