0

我知道这个问题以前被问过很多次，但从来没有一个答案可以帮助我解决我的情况。

我在它下面有<p>一个<ul>。段落和列表之间有空格。我不想要这个，但无法摆脱它。

我已经应用了最直接的解决方案，但它在我的页面中不起作用。

这应该是：http ://codepen.io/anon/pen/EsFqd 这就是我使用与codepen中所示相同的css得到的： 在此处输入图像描述

谁能帮帮我？

根据要求，HTML：

<article id="overzicht"
         style="<% if (browser.contains("Chrome") || browser.contains("MSIE")) {%>margin-right: 45px;<%}%>">
    <header>
        <h2>Overzicht</h2>
    </header>
    <div id="lijsten" data-collapse="persist">
        <p class="open">Groepen</p>
        <ul>
            <% try {
                while (bands.next()) { %>
            <li><%= bands.getString("band_naam") %></li>
            <li><%= bands.getString("pod_omschr") %></li>
            <%  }
               } catch (Exception e) { %>
            <li>Nog geen groepen</li>
            <% }%>
        </ul>
        <p>Campings</p>
        <ul>
            <% try {
                while (campings.next()) { %>
            <li><%= campings.getString("camp_adres") %></li>
            <li><%= campings.getString("camp_cap") %></li>
            <%  }
               } catch (Exception e) { %>
            <li>Nog geen campings</li>
            <% }%>
        </ul>
        <p>Tickets</p>
        <ul>
            <% try {
                while (tickets.next()) { %>
            <li><%= tickets.getString("typ_omschr") %></li>
            <li><%= tickets.getString("typ_prijs") %></li>
            <%  }
               } catch (Exception e) { %>
            <li>Nog geen tickets</li>
            <% }%>
        </ul>
    </div>
</article>

和完整的CSS：

article[id="details"] {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
}
p {
    font-size: 1.2em;
    text-align: center;
    border: 1px solid #cbcbcb;
    border-bottom: none;
    padding: 0;
    margin: 0;
    color: white;
    background-color: green;
}

ul {
    background-color: rgba(255, 255, 200, 0.2);
    height: 150px;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    list-style: none;
    text-align: left;
    border: 1px solid #cbcbcb;
    border-top: none;
}
li {
    margin-bottom: 5px;
    padding-left: -30px;
    margin-left: -30px;
}
li:nth-child(even) {
    text-align: right;
    padding-right: 5px;
    margin-left: -40px;
    padding-left: -40px;
    border-bottom: 1px solid white;
}
li:last-child {
    border-bottom: none;
}
li:first-child {
    padding-top: 3px;
}
4

3 回答 3

3

如果您实际站点上的 CSS 与 CodePen 中的相同，则听起来您需要重置，或者有冲突的 CSS。

也许尝试添加margin: 0 !important;以查看是否可以为您解决问题。如果是这样，可能会应用一些其他样式，这些样式比您的ul选择器更具体。

就像其他人所说的那样，查看您的实际 CSS 将使故障排除变得更加容易。

于 2013-04-10T20:37:20.793 回答
1

您很可能需要使用 CSS 重置。这会将所有默认浏览器（用户代理）html 样式重置为一致的基线。Codepen 最有可能使用这种重置，因此您的代码与他们的不同。

在 CSS 顶部添加 Eric Meyers 重置样式表的 CSS。你可以在这里找到它http://www.cssreset.com/。重新加载您的页面，看看它是否删除了间距。

编辑：避免使用 !important 因为它可能会覆盖您应用程序中的其他边距样式。从长远来看，这可能会导致很多头痛。进行 css 重置或找出应用边距的原因，并以不太强大的 css 特异性覆盖该样式。

于 2013-04-10T20:41:38.260 回答
0

我知道!important似乎解决了你的问题。但现在删除它并尝试添加：

body, * {
  margin: 0;
  padding: 0;
}

到您的 CSS 文件的顶部，看看是否可以修复它。如果没有，也许可以尝试@mikecan 的答案中提到的 CSS 重置。

于 2013-04-10T20:50:56.390 回答