Why is this basic menu list off-centre and not aligned with the text below it?
Question
Despite having made my own functional website, I'm dreadful with code.
I have bigger issues, but I thought I'd ask this first as it's basic. What's wrong with the code to make the menu list off-centre here?:
https://www.w3schools.com/code/tryit.asp?filename=GHPE6DVTVV5Q
3 answers
solution1
1 2020-08-13 11:30:14
There are default styles applied to all HTML tags in the browser. So the ul tag has got a default padding on the left. If you change your CSS to this it will work
ul#MenuBarFooter {
width: auto;
list-style: none;
padding: 10px 0px;} /*10px top bottom 0px left right */
solution2
1 ACCPTED 2020-08-13 11:33:13
You have a default CSS interfering here:
user agent stylesheet ul {
padding-inline-start: 40px;
}
You need to change:
ul#MenuBarFooter {
padding: 10px 0px;
}
Here I let to you the snippet with my change.
#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>
solution3
0 2020-08-13 11:33:00
add this to `#footer_container{width:100%; max-width:980px }
`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.