0

クリック可能な h2 内の要素

序章

HTMLで1行のメニューを作成しています。本当に似た方法で機能する3つのオプションがあります。問題は、適切な html を持つものの方が失敗しやすいように見えることです。ここに 3 つの例を示します。信頼できるブラウザ対応のメニューを探しています。3 番目のオプションは JavaScript を使用するので、あまり好きではありません。

メニューは幅 100% で、灰色の四角形で囲み、左側と右側にテキストを配置する必要があります。メニュー全体は、1 つのハイパーリンクだけでクリックできる必要があります。これは私がこれまでに試したことです：


実装例

それらがすべて機能していることを確認するためのリンクはここにあります(免責事項: はい、これは私自身の Web ページです)。そこをクリックしたくない場合は、オプションと同じ順序で表示されるイメージを次に示します。

3 つの現在の代替案を表示しています


オプション1。

これは html に準拠していませんが、より論理的であり、一般的に動作が良く、多くの問題を引き起こす可能性が低いことがわかりました。

<a href="http://newfutureuniversity.org/test/hblock.php">
  <h2 style="width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
    Hello world
    <span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
      Right text
    </span>
  </h2>
</a>


オプション 2。

これは HTML に準拠していますが、ピクセルを使用して中央に配置するのは嫌いです。割と簡単に切れそうな気がします。さらに、右側のテキストは完全にはクリックできません。

<h2 style="border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
  <a href="http://newfutureuniversity.org/test/hblock.php" style="width:100%; height:100%; display:block;">
    Hello world
  </a>
  <span style="position: relative; right: 6px; top:-23px; color:gray; font-size: 15px; float:right; ">
    Right text
  </span>
</h2>


オプション 3。

これはjavascriptを使用しています。このような javascript を使用してすべてのメニューを肥大化させず、html/css を使用することを好みますが、これは別のオプションです。通常のリンクのような色にはなりません。

<h2 onclick="location.href='http://newfutureuniversity.org/test/hblock.php';" style="cursor:pointer; display: block; width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
  Hello world
  <span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
    Right text
  </span>
</h2>


質問

ブラウザとの互換性が高く、壊れにくいのはどれですか? 他に推奨事項や改善点はありますか？どんなフィードバックでも大歓迎です

PS、すべてのインライン CSS は別の CSS シートに分割されます。

4

2 に答える 2

2

HTML を次のように再編成することをお勧めします。

<h2>
    <a href="http://newfutureuniversity.org/test/hblock.php">Hello world<span>Right text</span></a>
</h2>​

次に、次の CSS を使用します。

a {
    display: block;
    padding: 0.2em;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #aaa;
}

a span {
    color: #000;
    float: right;
    text-decoration: none;
    font-size: 0.8em;
    padding-top: 0.2em;
}​

JS フィドルのデモ。

h2ただし、これの有効性は、最終的にタグ内に配置してクリック可能にしたい要素によって異なります。HTML5 ではタグ内にブロック レベルの要素をネストすることは有効ですがa、HTML4 ではまだ機能しているように見えますが、doctype によると有効とは見なされません。

しかし、投稿された要件では、これはうまくいくようです。ただし、HTML の再構築が必要ですが、これは不可能な場合があります。でも：

  • 有効な HTML であり、
  • 壊れにくい (の内容がspan所定の幅を超えない限り、
  • px任意の調整に依存しません(ただしpadding、サイズ変更されたテキストを 内で垂直方向に中央揃えするために使用しますa)。
  • JavaScript は必要ありません

要素の CSSに追加overflow: hiddenするだけで、右側にフローティングされたテキストが次の行にオーバーフローするほど大きくなる可能性を考慮して、CSS を少し修正するように編集されました。a

a {
    display: block;
    padding: 0.2em;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #aaa;
    overflow: hidden;
}

JS フィドルのデモ。

もちろん、 に amax-widthを追加することもできますspan:

a span {
    color: #000;
    float: right;
    text-decoration: none;
    font-size: 0.8em;
    padding-top: 0.2em;
    max-width: 80%;
}​

JS フィドルのデモ。

于 2012-06-02T12:41:05.250 に答える
0

David Thomas のマークアップに同意します。より堅牢にするためにcssを少し変更しますが。ブラウザーのサイズを変更して、右側のスパンが左側のテキストの下に押し込まれる (ブラウザーを小さくする) と、適用した消去プロパティは、スパンがa エリアの外に移動します。

HTML:

<h2 class="item ">
    <a href="#" >Loads of left left Left Text<span>Right Text lots more</span></a>
</h2>

CSS:

.item a {
    zoom:1;
    border: 1px solid #666;
    background: grey;
    display: block;
}
.item a:before,
.item a:after {
    content:"";
    display:table;
}
.item a:after {
    clear:both;
}
.item span {
    background: green;
    float: right;
}

デモ：

http://jsfiddle.net/Vc3DA/

于 2012-06-02T12:50:58.800 に答える