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 と同じである場合は、リセットが必要か、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 に答える