为啥这个基本菜单列表偏离中心并且与它下面的文本不对齐？
Posted
技术标签:
【中文标题】为啥这个基本菜单列表偏离中心并且与它下面的文本不对齐？【英文标题】：Why is this basic menu list off-centre and not aligned with the text below it?为什么这个基本菜单列表偏离中心并且与它下面的文本不对齐？ 【发布时间】：2020-12-03 05:38:15 【问题描述】：尽管制作了自己的功能性网站，但我对代码感到恐惧。
我有更大的问题，但我想我会先问这个，因为它是基本的。使菜单列表偏离中心的代码有什么问题？：
https://www.w3schools.com/code/tryit.asp?filename=GHPE6DVTVV5Q
【问题讨论】：
请将代码添加到问题中，最好是在可运行的 sn-p 中 但它不是偏离中心的，我不确定你想要实现什么。结果是可以水平滚动的，并且您的菜单项居中。尝试在 TryIt 编辑器上更改方向，在top-left 菜单图标列表中。
【参考方案1】：
这里有一个默认的 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>【讨论】：
我宁愿更新 padding-top: 10px;底部填充：10px；填充左：0px；只是填充 :10px 0px; @Brian 那更好，我用那个建议改变了我的答案。【参考方案2】：浏览器中的所有 HTML 标签都有默认样式。所以 ul 标签在左边有一个默认的填充。如果您将 CSS 更改为此它将起作用
ul#MenuBarFooter
width: auto;
list-style: none;
padding: 10px 0px; /*10px top bottom 0px left right */
【讨论】：
【参考方案3】：add this to `#footer_containerwidth:100%; max-width:980px
`
【讨论】：
请在您的答案中添加一些解释，以便其他人可以从中学习以上是关于为啥这个基本菜单列表偏离中心并且与它下面的文本不对齐？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我在 Swing 的 JButton 中的 html 代码偏离中心？
我怎样才能更好地将这个按钮与中间的内容对齐？对我来说似乎偏离了中心：