1

ここにサイトがあります：

http://wesbos.com/tf/shutterflow/?cat=1

  1. S＆S写真を示す側面のバナー画像は、下部に数ピクセルのマージンを追加します。これは、URLにリンクした場合にのみ発生します。

  2. 画像をロールオーバーして、強調表示されているテキストを確認します。これは、行の終わりにパディングを追加したい場合を除いて、うまく機能します。通常のCSSパディングは、Pタグの開始と終了にのみ適用されます。私のコードは次のようにフォーマットする必要があります:(誰かがこの効果を複製する方法を知っていない限り、各行は段落タグです

フォーマットして申し訳ありませんが、エディターは何らかの理由でコードを複数行に配置することを許可しません。

    <p>hey hows it going<br/> this one is<br/> short and this one is longer<br/> will this text<br/> </p>

.cover p {
    display: inline;
   color: #000;
   background-color: #fff;
   padding:5px;
}
4

4 に答える 4

1

バナー画像の下部にある余分なスペースを取り除くには、次を使用します。

#sidebar a img {vertical-align:bottom;}

画像のデフォルトの垂直方向の配置はベースラインであり、テキストのディセンダーのための余地が残されています。

于 2009-08-21T11:39:31.537 に答える
1

サイドバーの場合:

画像を に設定display:block;して、余分なスペースを削除します。clear:both;他のスタイルのために、画像にも追加するか、上部のフロートを取り除く必要があります（代わりに使用できるulフロートをクリアするだけです）。lioverflow:hidden;

ホバー テキストの場合:

パディングを取得するには別の段落を使用する必要がありますが、WP では簡単に行うことができます。<br />表示の代わりにフロートを使用する場合、それぞれの最後に余分なものは必要ありません。

 .cover p {
    float: left; /* so they don't fill the full width */
    clear: both; /* so they don't float next to each other */
    color: #000;
    background-color: #fff;
    padding:5px;
 }

もちろん、display: inline;あなたが浮かんでいるところならどこにでも置いておきます。これは、IE5/6 の doubled float-margin バグを処理します。しかし、それは別の問題です。

于 2009-08-21T10:23:47.303 に答える
0

各行を要素でラップする必要があります。スパンは良い選択です:

<p><span>hey hows it going</span><br /><span>this one is</span>...

次に、スパン要素にパディングを追加できます。

.cover p {
   display: inline;
   color: #000;
   background-color: #fff;
}

.cover span {
   padding:5px;
}
于 2009-08-20T02:44:40.070 に答える
0

各行を <p> にしてこれを行うことができるはずですが、各行の最後に余分な <br> を追加する必要があります。

HTML:

<h3>Nature Orange</h3>
<p>hey hows it going<br /></p>
<p>this one is<br /></p>
<p>short and this one is longer<br /></p>
<p>will this text<br /></p>
<p>do what I<br /></p>
<p>Want?</p>

CSS:

.cover p{  
    display:inline;
    color: #000;
    background-color: #fff;
    margin:0;
    padding:0 5px;
    line-height:1;
    }

このデモをここにアップロードしました: http://demo.raleighbuckner.com/so/1303628/

于 2009-08-20T19:10:47.457 に答える