HTML p 换行符(转贴的转贴)

Question

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

我有一个 <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;
}

Answer 1

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

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

不过就像其他人所说的那样，查看您的实际 CSS 会使故障排除变得容易很多。