语义解决方案

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>，您可以将其设置为块级元素。 <span>是内联元素。内联元素中不能包含块级元素。因此，您必须使<span>成为块级元素。

以下CSS将实现此目的：

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

如果您使用<span>以保持所有链接位于同一行，请使用以下内容：

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

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

语义解决方案

您还可以删除额外的<div>或<span> ，以使您的代码更具语义性，并且仍然可以达到相同的效果（具有CSS {{ 1}}效果将在IE6中起作用）：

<强> HTML：

:hover

<强> CSS：

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

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

Semantic Solution Demo

CSS：如何使span链接扩展？

3 个答案:

语义解决方案

更多信息