0

編集/削除リンクをh1要素とインラインにする最良の方法について以前に質問しました。与えられた答えでこれを達成することができましたが、h1の下に段落を表示し、リンクを編集/削除する必要があるという追加の要件があります。

これまでのところ、私のHTMLは次のようになっています。

<div class="product-header">
  <div class="title">
    <h1>Product 1</h1>
  </div>
  <div class="admin">
      (<a href="#">Edit</a> | <a href="#">Delete</a>)
  </div>
  <p class="description">Product 1 is a cool product</p>
</div>

次のようにしたいと思います。

製品1（編集|削除）
製品1はクールな製品です

...残りのページコンテンツ

しかし、これを実現するためにどのCSSを使用すればよいかわかりません。私がすることはすべて、次のように、説明の段落をタイトルと同じ行に配置しているようです。

製品1（編集|削除）製品1はクールな製品です

...残りのページコンテンツ

JSFiddleへのリンク。

4

3 に答える 3

2

.product-headerクラスを追加する必要はありclear:bothませんが、以下のように.product-header .descriptionクラスを追加する必要があります。clear:both

.product-header .description {
    clear:both;
}​

デモ

その他の注意事項：

CSSのclearプロパティは、要素がその前にあるフローティング要素の隣に配置できるか、またはその下に移動 (クリア) する必要があるかを指定します。

于 2012-09-07T04:18:20.333 に答える
1

clear:bothに追加するだけです.description：

http://jsfiddle.net/kDQLZ/3/

于 2012-09-07T04:18:11.097 に答える
1

Jsfiddle デモ

こんにちは、あなたのpタグクラスをクリアしてください clear left

このように

.product-header .description {
 clear:left;   
}

デモ

于 2012-09-07T04:20:51.130 に答える