UL在左侧有间距。

Question

UL在左侧有间距。

csshtml-listsspace

29

由于某种原因，在我的页脚中，我的ul左侧有一个空格，所以它与上面的内容（会员文本等）不对齐。如果我在这个ul之外放置文本（但仍在页脚包装器内），则没有这样的空格。

以下是其外观：

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：

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;}

- Jamie O'Hanlon

3个回答

7

默认情况下，<UL/> 包含默认的内边距。

因此，尝试在 CSS 类或内联 CSS 中添加样式 padding:0px。

- G Ravinder

7

我看不到任何关于 #footer-wrap li 的 margin 或 margin-left 声明。

这样做应该可以解决问题：

#footer-wrap ul,
#footer-wrap li {
    margin-left: 0;
    list-style-type: none;
}

- Patrick Moore

1

我确信我尝试过那个..但是谢谢，现在它运行得很好！ - Jamie O'Hanlon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- madhushankarox · Accepted Answer

<ul>元素默认具有浏览器内在的填充和边距。在您的情况下，请使用

#footer ul {
    margin: 0; /* To remove default bottom margin */ 
    padding: 0; /* To remove default left padding */
}

或者使用CSS浏览器重置（https://cssreset.com/）来解决这个问题。