为什么这个基本菜单列表偏离了中心，并且与下面的文本不对齐

尽管我制作了自己的功能性网站，但我对代码很糟糕。

我有更大的问题，但我想我应该先问这个，因为这是基本的。使菜单列表偏离中心的代码有什么问题？：

https://www.w3schools.com/code/tryit.asp?filename=GHPE6DVTVV5Q

您在这里有一个默认的CSS干扰：

user agent stylesheet ul {
padding-inline-start: 40px;
}

您需要更改：

ul#MenuBarFooter {
padding: 10px 0px;
}

在这里，我把找零的片段给你。

#footer_container {
height: auto;
margin-bottom: auto;
width: 980px;
margin-top: 0px;
clear: both;
margin-left: auto;
margin-right: auto;
float: none;
}

.footer_nav {
display: inline;
margin: auto;
text-align: center;
font-family:"Trebuchet MS","sans-serif";
}
ul#MenuBarFooter {
width: auto;
list-style: none;
padding: 10px 0px;
}

ul#MenuBarFooter li {
display: inline;
text-align: center;
}

ul#MenuBarFooter a {
text-decoration:none;
text-align:center;
color: #0066FF;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-size: 10pt;
}

ul#MenuBarFooter a:hover, ul.MenuBarHorizontal a:focus {
color: #3333CC;
}

.footer_centering {
text-align: center;
text-decoration:none;
font-size:10pt;
font-family:"Trebuchet MS","sans-serif";
color:#0066FF;
clear: both;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>footer test</title>
</head>
<body>
<div id="footer_container">
<div class="footer_nav">
<ul id="MenuBarFooter">
<li class="MenuBarFooter">
<a href="http://www.albanydesign.co.uk/index.htm">Pub Maps</a>
</li>
<li class="MenuBarFooter">
<a href="http://www.albanydesign.co.uk/art.htm">Public   Projects</a>
</li>
<li class="MenuBarFooter">
<a href="http://www.albanydesign.co.uk/contact.htm">Contact</a>
</li>
<li class="MenuBarFooter">
<a href="http://www.albanydesign.co.uk/index2.htm">Hidden Index</a>
</li>

<li class="MenuBarFooter">
<a href="../abandoned_projects.htm">Abandoned Projects</a>
</li>
</ul>
</div>
<p class="footer_centering">© Steven Lovell / Albany Design</p>
</div>
</body>
</html>

浏览器中的所有HTML标记都应用了默认样式。因此，ul标签在左侧有一个默认的填充。如果你把你的CSS改成这个，它会工作

ul#MenuBarFooter {
width: auto;
list-style: none;
padding: 10px 0px;}  /*10px top bottom 0px left right */

add this to  `#footer_container{width:100%; max-width:980px }

相关内容

最新更新

热门标签：