CODEWITHSUNDEEP
htmlcss
user1406071
user1406071

Reputation: 627

How do I make an <a> tag the size of it's parent <li> tag?

I have the same question that this guy has asked here: How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?

However I would like these LI items like an inline menu, so I don't want them to list under each other. How is it aciveable?

Upvotes: 0

Views: 170

Answers (6)

XTGX
XTGX

Reputation: 114

set 

float:left; to the  class controlling li

this will help you . and if you want to make the as clickable as the li's are set the property of anchor < a> to 

display:block;
height:value as you like px;
Width:value as you like px;

Upvotes: 1

BigBagel
BigBagel

Reputation: 860

Here's a fairly simple method:

ul {
    list-style-type: none;
}

li {
    float: left;
}

a {
    display: block;
}

Then you can add any heights, widths, line-heights, and paddings accordingly.

Here's an example: http://jsfiddle.net/BBcEr/2/

Upvotes: 0

insertusernamehere
insertusernamehere

Reputation: 23580

The most simple markup could be this:

  • the li-elements float and therefor are lined up horizontally
  • the a-tags have display: block; to take up the space they have within their parents
  • the ul has overflow: hidden; to clear the float of its schildren

Demo

Try before buy

HTML

<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
</ul>

CSS

ul {
    overflow: hidden;
    list-style: none;
}

ul > li {
    float: left;
}

ul > li > a {
    display: block;
}

Upvotes: 1

David Taiaroa
David Taiaroa

Reputation: 25495

There are any number of different options, here is one which will be easy to customise: http://jsfiddle.net/panchroma/WuhVp/
HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul> 
</div>

CSS 

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: olive;
color: White;
float: left;
width: 100%;
font-family:sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: olive;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

Upvotes: 3

ashgkwd
ashgkwd

Reputation: 195

trick is very simple. keep padding of <a> larger than <li>.

li { padding: 0; }
a { padding: 1.1em; }

Upvotes: 0

Hasan
Hasan

Reputation: 2552

Try li a{ height:100%; width:100%} this forces "a" elements under "li" elements to have width and height of its parent

Upvotes: 1

Related Questions