html - "div"变成 "a"是错误的。那么，我该怎么做呢？ (HTML4、CSS2、跨浏览器)

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( float )。

但这是“不正确的”。那么我该怎么做呢？

编辑

另一种解决方案是将内部 div(带填充的)更改为 span : http://jsfiddle.net/p8Mps/3/

但尝试在 IE7 上放大/缩小窗口:它会失败...

Answer 1

我会制作'a'标签

display: block;

这将使您能够将它们设置为 div 标签的样式，并且您可以相应地添加 padding left 和 padding right。