9

「製品」の名前を表示する Web ページがあり、同じ行の横に編集/削除リンクがあります。例：

商品 1 (編集 | 削除)

製品名のフォント サイズを大きくし、編集/削除ボタンのフォント サイズを通常のサイズ (つまり、段落などと同じ) にしたい。そして、上の例のようにインラインで表示したいのです。これを実現するには、どの HTML/CSS を使用すればよいか考えています。

製品名に h1 要素を使用すると、h1 はブロック要素であるため、編集/削除リンクが次の行にプッシュされます。したがって、CSS で h1 をオーバーライドして make を実行できますがdisplay: inline、h1 の自然な外観をいじるのは、ベスト プラクティスに反するように思えます (?)。

もう 1 つのオプションは、単純に h1 要素をまったく使用せず、いくつかのインライン div またはスパンを使用することです。しかし、ウェブページの最上位ヘッダーに h1 要素を使用しないことは、ベスト プラクティスに反するもののようにも思えます...また、フォント サイズを明示的に設定する必要があるため、デフォルトのフォント サイズを使用することはできません。ウェブサイトの残りの部分で使用する h1 要素と p 要素。

この状況での最善のアプローチは何ですか？単純で些細な質問であることは承知していますが、とにかく知っておくといいでしょう。

4

5 に答える 5

4

ええ、それらのリンクはあなたの<h1>. 1 つの方法は、次のように見出しをフロートすることです。

​&lt;h1>Title</h1>
<div class="tools"> <!-- perhaps use an unordered list here and not div -->
    <a href="#">Edit</a>
    <a href="#">Delete</a> <!-- use a form with POST to delete instead -->
</div>

h1 { float:left; }

http://jsfiddle.net/JeuXt/

表示部分 (CSS) に関する普遍的なベスト プラクティスや方法はありませんが、HTML をクリーンに保ち、すべての意味が正しいことを望みます。

于 2012-09-06T15:15:44.583 に答える
2

のラッパーdivを使用しh1てフローティングすると、役立つ場合があります。

これはあなたが探しているものですか？: http://jsfiddle.net/Pt2BZ/

于 2012-09-06T16:40:50.177 に答える
-1

別のオプションは、無視されがちなdisplay: run-in;スタイルを使用することです。これによりh1、 がすぐ隣のブロック レベル要素に「突入」します。

注- このルールのブラウザー サポートはまだ少しむらがあるかもしれないので、実稼働環境で使用する前に必ずテストしてください。

HTML

<h1>Page Title</h1>
<div class="links">
    ( <a href="#">Edit</a> | <a href="#">Delete</a> )
</div>​

CSS

h1 {     
    display: run-in;
    vertical-align: middle;
}

--- jsFiddle デモ ---

于 2012-09-06T15:21:55.857 に答える
-1

個人的には<span></span>、カスタムタイプの見出しを作成するために、見出しタグの代わりにそれらに対して CSS クラスを持つタグを使用するだけです。見出しタグは独自のデフォルトの動作を示すため、柔軟性が高くなり、見出しタグのスタイルに加えた変更が今後サイトの他の部分に影響を与え始める状況に陥る可能性があります.

<H1>編集:タグの使用に関する W3C の考えへのリンクは次のとおりです:リンク

于 2012-09-06T15:22:05.187 に答える
-2

タグを使用して、<h1>小さくしたい要素をでラップすることをお勧めします<span>。次に、スパンにクラスを設定し、次のようにCSSでターゲットを設定します。

HTML

<h1>Product 1 <span class="foo">(Edit | Delete)​​​​​&lt;/span></h1>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

​.foo {
    font-size: 10px;
}​

jsFiddleの例

于 2012-09-06T15:13:17.467 に答える