CSS:如何使span链接扩展？

Question

我试图在div按钮内建立链接,当你在div中鼠标悬停然后它将检测链接因为css属性

display:block;width:100%;height:100%;

使用div它工作正常,但我试图将它用作跨度但显示器未对齐.如何使显示正确？

这是代码:

<style>
.link-rounded-button {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #828282;
    padding:0 0 0 3px;
    /* for test purposes, expand the width */
    width:200px;
}

.link-block {
    display:block;
    width:100%;
    height:100%;
}
</style>

<div class="link-rounded-button">
    <a class="link-block" href="#">this is a link inside a div</a>
</div>
<hr />
<!-- If I make the div to a span, the display is not correct. -->
<span class="link-rounded-button">
    <a class="link-block" href="#">this is a link inside a span</a>
</span>

提前致谢 :)

亲切的问候,马克

Answer 1

也可以创建<span>一个块级元素.通过display: block;对<a>标记执行操作,您将使其成为块级元素.A <span>是内联元素.内联元素中不能包含块级元素.因此,您必须创建<span>一个块级元素.

以下CSS将实现此目的:

SPAN.link-rounded-button {
    display: block;
}

如果您使用的<span>是为了将所有链接保持在同一行,请使用以下命令:

SPAN.link-rounded-button {
    display: inline-block;
}

警告: IE6及更低版本仅支持inline-block默认内联的on元素.它不会工作的<div>,例如,但它会正常工作的一个<span>.

语义解决方案

您也可以删除额外的内容<div>或<span>使代码更具语义性并仍然达到相同的效果(具有可:hover在IE6 中使用的CSS 效果的额外好处):

HTML:

<a class="link-rounded-button" href="#">this is a link with no extra markup</a>

CSS:

a.link-rounded-button {
    display: inline-block; 
    /* or display:block; depending of 
       the effect you are trying to achieve */

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #828282;
    padding:0 3px;
}

a.link-rounded-button:hover {
    background-color: #828282;
}

我已经设置了这个解决方案的演示.

语义解决方案演示

更多信息

以下是被视为块级元素或接受块级元素作为子元素的元素列表.

XHTML 1.0块级元素