Geek asks and answers

Stretching the <a> tag to populate the parent <li> in the horizontal list

Here is my (distracted) css and HTML:

#primary-menu{
text-align: center;
margin: 20px 0;
}

#primary-menu li{
list-style-type:none;
display: inline;
margin: 8px;
padding: 5px 30px;
}

#primary-menu ul{
padding: 20px 0px;
}

<div id="primary-menu">
<ul id="main-menu">
<li><a href="one">one</a></li>
<li><a href="two">two</a></li>
<li><a href="three">three</a></li>
</ul>   
</div>

I tried putting #primary-menu a{display:block;}and taking out display: inline;and adding in float:left;to #primary-menu li, but then the list shifts the page and moves outside the containing div, plus it doesn't look like it keeps the <a>length after I put float:left;in.

Another option that I know about is to change the list to look like <a href="one"><li>one</li></a>, but I would not want to do this because (except that it is very hoarse) this list is created by Drupal, I really know how to do it, without learning how the API works, which doesn't seem like this problem.

All help would be appreciated. Thank.

+5
2

, li a. :

#primary-menu li{
  list-style-type:none;
  display: inline-block;
  margin: 8px;
}

#primary-menu li a {
   padding: 5px 30px;
   display:block;
}

: http://jsfiddle.net/v6ZFx/

+10

. . . li {display: inline-block; : ; padding: 0}

a_s . li.

+1

More articles:


All Articles