如何解决为什么此基本菜单列表偏离中心且与下面的文本不对齐?
尽管建立了自己的网站,但我对代码感到恐惧。
我有更大的问题,但是我想我首先要问这个问题,因为这是基本问题。使菜单列表偏离中心的代码有什么问题?:
https://www.w3schools.com/code/tryit.asp?filename=GHPE6DVTVV5Q
解决方法
浏览器中的所有HTML标记均已应用默认样式。因此,ul标签的左侧为默认填充。如果将CSS更改为此,
ul#MenuBarFooter {
width: auto;
list-style: none;
padding: 10px 0px;} /*10px top bottom 0px left right */
,
您在此处有默认的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>
,
add this to `#footer_container{width:100%; max-width:980px }
`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。