"div"を "a"に変換するのは間違っています。では、どうしたらいいですか? (HTML4、CSS2、クロスブラウザー)

私は this コードを持っています:

HTML

<div class="temperatura">
    
        <div style="padding-left:12px;">
            Text1
        </div>
    

    
        <div style="padding-right:70px;">            
            Text2
        </div>
            
</div>

CSS

.temperatura
{
    height:34px;
    position:relative;
    background-color:#FF0000;
    font-size:14px;
    font-weight:bold;
}

.temperatura_localita
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-decoration:none;
}

.temperatura_dettagli
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-align:right;
    text-decoration:none;
}

左(最初)と右(2番目)のパディングを持つ2つのリンク可能な要素(それぞれ50%)が必要です。

私が知っている唯一の戦略は、内部divをパディングで2つ a (floatted)にすることです。

しかし、それは「間違っている」。だから私はこれをどのようにすることができますか?

編集

The other solution is just change the internal div (the ones with padding) with span : http://jsfiddle.net/p8Mps/3/

しかし、IE7のウィンドウを拡大/縮小しよう:失敗します...

3
a要素に50%のパディングを追加することはできません。パディングスペースも取られ、新しい行が作成されます。私はこれがはっきりしていたと思います...
追加された 著者 markzzz,
@markzzzなぜアンカー要素自体にパディングを定義しないのですか?
追加された 著者 Šime Vidas,
HTML4とHTML5の違いについて、それぞれのバージョンについて言及していない会話を楽しんでください。
追加された 著者 BoltClock,
それはなぜ「間違っている」のですか? Afaik、 には、インライン要素だけが含まれ、ブロックレベルの要素は含まれません。したがって、 a div (speak css)は「間違っている」(DTDごとに)
追加された 著者 knittl,
@Sidnicious:多分HTML5で(それはまだ最終ですか?)私は実際にはHTML4について話していました(しかし、それは言及していません)
追加された 著者 knittl,
@knittl:コード> a 要素透過的なコンテンツモデルであり、ブロックレベルの要素を含め、その親に含めることができるものをすべて含めることができます。
追加された 著者 s4y,
@Sidnicious: HTML 4.01の仕様>要素はインライン要素のみを含むことができます。 <div> はブロックレベルの要素なので、 の内部には指定しないでください。
追加された 著者 Sparky,

4 答え

私は 'a'タグを作るだろう

display: block;

これにより、divタグのようにスタイルを設定することができます。また、余白を左に追加し、余白を追加することもできます。

2
追加された
float:left; であるので、
追加された 著者 markzzz,

(anchors) are inline elements.

<div> (divisions) are block level elements.

HTML 4.01 specifications state that elements may only contain inline elements. A <div> is a block level element, so it must not appear inside an .

Never put block level elements inside inline elements.

You would put inline elements inside block level elements instead...

<div class="temperatura">
    <div style="padding-left:12px;">
        
            Text1
       
    </div>
    <div style="padding-right:70px;">
              
            Text2
         
    </div>       
</div>

EDIT based on OP's comments...

http://jsfiddle.net/sparky672/p8Mps/9/

<div class="temperatura">
    <div class="temperatura_localita">
        
            Text1
       
    </div>
    <div class="temperatura_dettagli">
              
            Text2
         
    </div>       
</div>

EDIT 2 based on further comments...

http://jsfiddle.net/sparky672/p8Mps/13/

<div class="temperatura">
    
        Text1 

     
        Text2    
</div>
1
追加された
Uhm:実際には別の質問です...とにかくおかげで...
追加された 著者 markzzz,
いいえ! :) IE7でそれを実行し、ウィンドウを増やしてみてください:失敗します。私はこの問題についての議論も開きました stackoverflow.com/questions/7918536/…
追加された 著者 markzzz,
私が探しているものではありませんか?Sparky672: temperatura はリンク可能でなければなりません。
追加された 著者 markzzz,
大丈夫です。わかりました。とにかく、最後のオプションは別の動作を持っています:実際にコンテナ(div)全体が私の例として "リンク"されていません。
追加された 著者 markzzz,
私は恥ずかしいです:Oあなたの例はなぜ機能するのですか?変わっている。実際、CSSスタイルシートに余白を置くと、 jsfiddle.net/p8Mps/6 に失敗します。何が起こっていますか?
追加された 著者 markzzz,
恐ろしい=セマンティクス(divをaにする)が間違っているように見える
追加された 著者 markzzz,
??私はそれらをインラインにする必要があります。私は50%両方が必要です:a hrefにパディングを追加すると、a要素が2行に配置されます。
追加された 著者 markzzz,
@markzzz、なぜパディングの代わりに余白を使用しないのですか?次に内側の div をそれぞれ 50%にして余白を タグに置きます。編集済みの回答とフィドルを見る... jsfiddle.net/sparky672/p8Mps/8
追加された 著者 Sparky,
@markzzz、重複した質問を投稿しないでください。 1つはおそらく閉じられるでしょう。
追加された 著者 Sparky,
@markzzz、これはあなたが望むように動作するようです... jsfiddle.net/sparky672/p8Mps/13
追加された 著者 Sparky,
@markzzz、私の更新されたフィドルを見て、マージンスタイルをCSSに入れる。通常、コンテナ全体(ブロックレベル)はアンカータグでラップしてクリック可能なリンクとして表示されません。JavaScriptを使用して onclick イベントをコンテナ全体にバインドします。似たようなものがあるメニューシステムでは、画像がインラインであるため、アンカーで囲まれているためです。
追加された 著者 Sparky,
@markzzz、 div に適用されたクラスに余白を設定しているので、失敗しています。私の例では、マージンは に適用されました。
追加された 著者 Sparky,

アンカーにパディングを追加するためのコンテナは必要ありません。だから、使用する:

<div class="temperatura">
    
        Text1
    

                
        Text2
            
</div>

If you really need a container, change div to span, and add display:block to the span element. After this declaration, the element will "behave" similar to the <div> element.

1
追加された
質問のEDITをチェックしてください。表示は必要ありません:内部スパンのブロックですが、IE7ではスクロールに失敗します...
追加された 著者 markzzz,
divの代わりにを使用すると、パディングが取得されます。しかし、IE7では、パッド入りスパンの50%が時々気持ち悪い...
追加された 著者 markzzz,
@markzzz別の方法は、特定の display プロパティを使用することです。 jsfiddle.net/ p8Mps/7
追加された 著者 Rob W,

knittlのコメントを考慮に入れてください。 私は2つの可能な解決策を考えることができます:

1) div タグ( a タグなし)のみを使用し、 onclick 属性を使用して目的のURLにリダイレクトします。

2) a cssに display:block を追加し、 div を省略します。その後、必要に応じてタグを作成します

1
追加された
いいえ、a要素にdivを入れることはできません。間違っている。 Firefoxはこのエラーを修正できるかもしれませんが、IEはそれをしません。また、私はjavascriptを避ける...
追加された 著者 markzzz,
Soluton 1はアクセシビリティの "F"を取得します(ユーザーはキーボードを介してどのようにナビゲートし、スクリーンリーダーのユーザーはそのリンクにアクセスできますか?)
追加された 著者 steveax,
@steveax:それは本当ですが、通常は悪い習慣です。ただそれを言いました...
追加された 著者 CdB,
これは、 adiv ではなく、 a または div とにかく、私はそれがあまりにも複雑ではないと思う、あなたがそれを周り遊ぶなら、あなたが望むことをすることができます;)
追加された 著者 CdB,