代码之家 › 专栏 › 技术社区 › marknt15

如何建立一个扩展的跨链接?

hyperlink css

marknt15 · 技术社区 · 15 年前

我正在尝试在一个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>

事先谢谢:)

亲切的问候, 作记号

3 回复 | 直到 15 年前

Andrew Moore 15 年前

使 <span> 块级元素。通过做 display: block; 上 <a> 标记,您正在使其成为块级元素。一 <SPAN & GT; 是内联元素。在内联元素中不能有块级元素。因此,你必须 <SPAN & GT; 块级元素。

以下CSS将实现此目的:

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

如果您正在使用 <SPAN & GT; 为了将所有链接保持在同一行上,请使用以下内容:

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

警告: IE6及以下仅支持 inline-block 在默认为内联的元素上。它不起作用 <div> 例如,但在 <SPAN & GT; .

语义解决方案

你也可以 放弃你的额外 <DIV & GT; 或 <SPAN & GT; 使代码更加语义化,并且仍然达到相同的效果(使用CSS的额外好处是 :hover 将在IE6中起作用的效果:

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

更多信息

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

XHTML 1.0 Block-level Elements

Kane Wallmann 15 年前

尝试添加

display: block;

链接圆形按钮样式。

Salaryman 15 年前

跨度的默认显示为 内联的 因此,在其中放置一个块元素不会给您预期的结果。添加 显示:块 到。链接圆形按钮。