CSS UL 左边有余量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15251127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 21:55:31 来源:igfitidea点击:
UL has margin on the left
提问by Jamie O'Hanlon
For some reason in my footer there's a space to the left of my ul so it isn't lined up with the content above it (membership text etc) If I were to put text outside this ul (but still within the footer wrapper) there is no such space.
出于某种原因，在我的页脚中，我的 ul 左侧有一个空格，因此它没有与它上面的内容对齐（会员文本等）如果我将文本放在此 ul 之外（但仍在页脚包装器内）是没有这样的空间。
Here's what it looks like:
这是它的样子：
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Ozanam Club </title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fonts/enigma.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="logo"><a href="#"><img src="images/logo.png" height="157px" width="237px"></a></div>
<!--
<div class="social">
<ul>
<li><a href="#"><img src="images/icons/facebook.gif"/></a></li>
<li><a href="#"><img src="images/icons/twitter.gif"/></a></li>
<li><a href="#"><img src="images/icons/youtube.gif"/></a></li>
</ul>
</div>
-->
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Clubs</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/image1.gif" />
</li>
<li>
<img src="images/slider/image2.gif" />
</li>
<li>
<img src="images/slider/image3.gif" />
</li>
</ul>
</div>
</section>
<div class="main">
<h1>Ozanam Club</h1>
<p>The first Ozanam Club was started in May 1989 by James Lynch, a member of the
St. Vincent De Paul society who himself had two children with learning difficulties
and who was concerned at the general lack of leisure provision for them.</p>
<p>The Ozanam Club is a Special Works Conference of the St. vincent De Paul Society.
The name of the clubs are called after Blessed Frederick Ozanam who is the founder
of the S.S.V.P. At this present time we have two clubs in Viewpark, an adults club
and a seperate club for younger members. We have an adults club in Hamilton and
Paisley and also a club in Carfin for younger members. </p>
<h1>Membership</h1>
<p>Membership is open to anyone who has disablities, regardless of their race or religious belief.</p>
<p>The aim of the clubs are a fun night out for our members and some temporary respite for parents. All of the clubs are run solely by volunteers who are disclosure checked prior to working with
vulnerable adults/children.</p><p> They are also made aware of the Adults/Children Protection Procedures and encouraged to attend an information session.</p>
<p>You can find more information on our a <a href="#">F.A.Q page.</a></p>
</div>
<div class="side">
<img src="images/events.gif" alt="Events" />
<a href="#" class="button">View</a>
</div>
<div class="side">
<img src="images/photos.gif" alt="Events" />
<a href="#" class="button">View</a>
</div>
</div>
<footer>
<div id="footer-wrap">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Clubs</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</footer>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
</html>
CSS:
CSS：
body {background: white; background: url('../images/grunge.png'); font-family: 'EnigmaticRegular';}
#wrap {margin: 0 auto; width: 100%; max-width: 1000px;}
header {position: relative;}
#logo {margin: 20px 0 0 0; display: block; float: left;}
.social ul { z-index: 1; list-style: none; position: absolute; top: 0; right: 0;}
.social li { float: left;}
.social img { height: 35px; width: 35px;}
#navigation { width: 100%; max-width: 1000px; height: 200px; position: relative; }
#navigation ul { padding: 0.5em; background: white; border-radius: 5px; border-bottom: solid 3px #3c88bc; display: inline-block; position: absolute; bottom: 0; right: 0;}
#navigation li { padding-left: 0.5em; padding-right: 0.5em; list-style: none; font-style: none; font-family: 'EnigmaticBold'; border-right: solid 1px black;}
#navigation li:last-child { border: 0;}
#navigation ul,
#navigation li {float: left;}
#navigation a { color: #195c8a; text-decoration: none; font-weight: bold;}
#navigation a:hover { color: #13405f;}
.main { float: left; margin-top: 20px; width: 625px;}
.main h1 {font-family: 'EnigmaticBold'; color: #13405f; }
.main p {color: #13405f;}
.main a {color: inherit; }
.side {float: right; margin-top: 20px; border-radius: 10px; margin-bottom: 10%; }
.side a { text-decoration: none; color: #3c88bc;}
.button { font-size: 14px;font-family: 'EnigmaticBold'; display: block; width: 100px; margin: 0 auto; text-align: center; background: #fff; padding: 5px; border-radius: 10px; border-bottom: solid 3px #3c88bc;}
footer { height: 100px; background: #195c8a; clear: both; }
#footer-wrap {margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; }
#footer-wrap li { float: left; list-style: none; padding-right: 3em;}
#footer-wrap a {color: white ;text-decoration: none;}
回答by madhushankarox
The <ul>element has browser inherent padding & margin by default. In your case, Use
<ul>默认情况下，该元素具有浏览器固有的内边距和边距。在你的情况下，使用
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
or a CSS browser reset ( https://cssreset.com/) to deal with this.
或 CSS 浏览器重置 ( https://cssreset.com/) 来解决这个问题。
回答by Patrick Moore
I don't see any marginor margin-leftdeclarations for #footer-wrap li.
我没有看到任何margin或margin-left声明#footer-wrap li。
This ought to do the trick:
这应该可以解决问题：
#footer-wrap ul,
#footer-wrap li {
margin-left: 0;
list-style-type: none;
}
回答by G Ravinder
by default <UL/>contains default padding
默认<UL/>包含默认填充
therefore try adding style to padding:0pxin css class or inline css
因此尝试padding:0px在 css 类或内联 css 中添加样式
