CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6197

How to make an element (<a>) stretch to the full width of its parent element (container)?

I made a responsive menu:

http://jsfiddle.net/7vmCZ/2/

<ul id="nav">
    <li>Menu 1
        <ul>
            <li><a href="/">Menu 111</a></li>
            <li><a href="/">Menu 22</a></li>
            <li><a href="/">Menu 3333</a></li>
            <li>Menu 44
                <ul>
                    <li><a href="/">Menu 111111</a></li>
                    <li><a href="/">Menu 22</a></li>
                    <li><a href="/">Menu 3333</a></li>
                    <li><a href="/">Menu 44</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="/">Menu 2222</a></li>
    <li>Menu 33<ul><li>This submenu should be under Menu33</li></ul></li>
        <li><a href="/">Menu 4444444</a></li>
</ul>

a
{
    background-color: red;
}

#nav {
    display:table;
}
#nav > li {
    list-style:none;
    padding:0px 10px 0px 10px;
    border:1px #000 solid;
    position:relative;
    display:table-cell;
    width:1%;
}
#nav ul li {
    width: 100%;
    display:block;
    text-indent:10px;
    line-height:30px;
    margin-right:10px;
    border-top:1px #000 solid;
    border-bottom:1px #000 solid;
    border-left:none;
    border-right:none;
    background:#fff;
    position:relative;
    white-space:nowrap;
}
ul {
    display:none;
}
li:hover > ul {
    display:block;
    position:absolute;
    z-index:1000;
    border:1px #000 solid;
}
ul#nav > li:hover > ul {
    margin-left: -10px;
}
#nav > li ul li ul {
    left:100%;
    top:-2px;
    white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
    color:#fff;
    background:#000;
}
li, li a {
    color:#000;
    text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}

the problem is, the menus are clickable, and the tag wont fit all its container (thats why I highlighted with red color). How to dodge it?

Upvotes: 2

Views: 5878

Answers (2)

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

Here you go

http://jsfiddle.net/SinisterSystems/7vmCZ/3/

li {
    text-align:center;
}
a
{
    background-color: red;
    display:block;
}

For the filled BG, use display:block;

For the alignment, target your li items.

If you just want your top level list items centered, use a basic text-align on all li items, then a psuedo class to direct descendants of your ul#nav.

ul#nav li {
    text-align:left;
}
ul#nav > li {
    text-align:center;
}

Upvotes: 1

m59
m59

Reputation: 43755

a {
  display: block;
}

Possibly add width: 100%; also,

<a> elements are display: inline by default, so the width will only be as wide as the text and any padding added to the element. display: block will make it take up the available width.

In case you still have problems, don't forget about the parent element's padding. The child can only take up as much space as is available to it. The parent padding may prevent it from stretching all the way to the edge of the parent. This will also be the case with the element's margin. If the a tag here has a margin, this will put space around it.

Upvotes: 11

Related Questions