CSS: How to make a span link to expand?


Tags: css,hyperlink

Problem :

I am trying to to make link inside a div button that when you mouseover in a div then it will detect the link because of the css property

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

Using a div it works fine, but I am trying to use it as a span but the display gets misaligned. How can I make the display correct?

Here's the code:

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

Thanks in advance :)

Kind Regards, Mark



Solution :

Make the <span> a block level element as well. By doing display: block; on the <a> tag, you are making it a block level element. A <span> is a inline element. You cannot have a block level element inside a inline element. You must therefore make your <span> a block level element.

The following CSS will achieve this:

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

If you are using <span> in order to keep all the links on the same line, then use the following:

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

WARNING: IE6 and below only supports inline-block on elements which are by default inline. It will not work on <div> for example, but it will work fine on a <span>.


Semantic Solution

You could also drop your extra <div> or <span> to make your code more semantic and still achieve the same effect (with the added benefit of having a CSS :hover effect which will work in 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;
}

I've setup a demo of this solution.

Semantic Solution Demo


More Information

Here is a list of elements that are considered block level elements or accept block level elements as children.

XHTML 1.0 Block-level Elements


    CSS Howto..

    How to reffer in CSS to an input which has class attached to?

    How to scroll horizontally when there are many columns (or a very long row)?

    How to Remove the Awkward Margin to the Left of my Unordered List?

    How do I stop a CSS layout from distorting when zooming in/out?

    How to center the buttons and make them same size

    How to apply an image to a CSS ordered list in WordPress?

    how to change css for a seletor when the selector doesn't exist javascript / jquery

    How to program a CSS3/JQuery/Flexslider carousel with visible sides

    how to put 6 divs in the same line?

    How can design a full screen calendar view in Twitter Bootstrap?

    CSS `will-change` - how to use it, how it works

    How to get maximum compatibility with most of the devices for a Mobile Website?

    How to make a sliding dashboard similar to medium.com? [closed]

    Why the space after the table, and how to remove it?

    How do I get my HTML page to display in the browser without horizontal and vertical scroll bars?

    How to identify element using link name in a onclick html tag?

    How to embed SVG styling with javascript?

    How to take in account children for :nth-child

    css + thymeleaf - How to auto-adjust displayed screen size?

    Align lists on showing or hiding

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?

    How can I force clients to refresh JavaScript/CSS files rendered with Jade in Node.js?

    Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

    How can I include the CSS file in CodeIgniter?

    css make img shown when hover a li

    How can I enlarge a table row when hovering over it? - Variation

    How to style multiples of 3 li elements [duplicate]

    How to have choices that change the background of a site

    How to align logo and text in bootstrap on small screens?

    How to set max-width for DIV contents but not the DIV itself?