0

html

 <ul class="social">
 <li><a class="html5" href="#html5"></a></li>
 <li><a class="twitter" href="#twitter"></a></li>
 <li><a class="facebook" href="#facebook"></a></li>
 <ul>

すべてが機能しますが、マージンに適合しませんか? ページの残りの部分と同じようにフラッシュする必要があります...何かアドバイスはありますか?

CSS

.social ul
{
list-style-type:none;
margin:0;
padding:0;
}
.social li
{
display: inline-block;
}
4

2 に答える 2

1

CSS では、マージンとパディングを「0」に設定しようとしていますが、パスが間違っているためです。

-> .social ul

私はそれがあるべきだと思います：

->ul.social

于 2013-03-10T17:07:06.347 に答える
0

フィドルで<ul>は、デフォルトの 40px の左パディングと 16px の上下マージンがあるためmargin: 0; padding: 0;、順序付けされていないリストに追加するだけです。すべてのブラウザーは、このパディング/マージンをリストに追加します。CSS リセットを使用することをお勧めします。これにより、各要素の既定のブラウザー スタイルを明示的にリセットできます。詳細については、これを見てください

次にinline-block、要素は空白に依存するため、コメントアウトするか、マークアップの空白を削除すると ( の間<li>)、画像間の水平方向のスペースが縮小されます。

編集:インラインで水平に表示されます..margin: 0; padding: 0;有効にならなかった理由は.social ul、順序付けられていないリストがクラス .social を持つ要素の子孫であることを意味するためです。

于 2013-03-10T17:03:33.653 に答える