CSS:如何使跨度链接扩展？

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>也是 block 级元素。通过这样做display: block;关于<a>标签，您正在将其设为 block 级元素。一个<span>是一个内联元素。内联元素中不能包含 block 级元素。因此，您必须将您的 <span> block 级元素。

以下 CSS 将实现此目的:

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

如果您使用<span>为了使所有链接保持在同一行，请使用以下内容:

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

警告: IE6及以下版本仅支持inline-block在默认情况下内联的元素上。它不适用于 <div>例如，但它在 <span> 上可以正常工作。 .

---

语义解决方案

您还可以放弃多余的 <div>或<span> 使您的代码更加语义化，并且仍然达到相同的效果(还有一个额外的好处，即具有可在 IE6 中使用的 CSS :hover 效果):

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;
}

我已经设置了该解决方案的演示。

Semantic Solution Demo

---

更多信息

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

XHTML 1.0 Block-level Elements