“div”变成“a”是错误的。那么，我该怎么做呢？ （HTML4，CSS2，crossbrowser）

Question

我有this代码：

HTML

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

    <a href="/link/" class="temperatura_dettagli">
        <div style="padding-right:70px;">            
            Text2
        </div>
    </a>        
</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;
}

我需要两个可链接的元素（每个50％），左边是填充（第一个），右边是第二个。

我知道的唯一策略是使用带填充的内部div生成两个a（浮动）。

但它“不正确”。那我怎么能这样做呢？

修改

另一个解决方案是更改内部div（带填充的div）：span http://jsfiddle.net/p8Mps/3/

但是尝试放大/缩小IE7上的窗口：它会失败......

Answer 1

我会制作'a'标签

display: block;

这将使您能够将它们设置为div标签，并且可以相应地添加左侧填充和填充。

Answer 2

考虑knittl的评论。 我可以想到两种可能的解决方案：

1）仅使用div（不包含a标记），并使用onclick属性重定向到您想要的网址。

2）将display:block添加到a css并省略div。然后根据需要设置标签样式

Answer 3

您不需要容器来为锚点添加填充。所以，使用：

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

    <a href="/link/" class="temperatura_dettagli" style="padding-right:70px;">            
        Text2
    </a>        
</div>

如果真的需要容器，请将div更改为span，然后将display:block添加到span元素。在此声明之后，<span>元素将“行为”类似于<div>元素。

Answer 4

<a>（锚点）是内联元素。

<div>（分部）是块级元素。

HTML 4.01 specifications state <a>个元素可能只包含内联元素。 <div>是块级元素，因此不得出现在<a>内。

永远不要将块级元素放在内联元素中。

您可以将内联元素放在块级元素中而不是......

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

编辑基于OP的评论...

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

<div class="temperatura">
    <div class="temperatura_localita">
        <a href="/link/" style="margin-left:12px;">
            Text1
       </a>
    </div>
    <div class="temperatura_dettagli">
        <a href="/link/" style="margin-right:70px;">      
            Text2
        </a> 
    </div>       
</div>

编辑2 基于进一步的评论...

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

<div class="temperatura">
    <a href="/link1/" class="temperatura_localita">
        <span>Text1</span>
    </a>

    <a href="/link2/" class="temperatura_dettagli"> 
        <span>Text2</span>
    </a>   
</div>