KiraNakari KiraNakari - 2 months ago 6
CSS Question

CSS: Make all <li> width from a list the same and take up 100% of available space

I am trying to make the horizontal navigation menu take up all available width from parent element.

I have tried using the display:table and display:table-cell but that did not work.

Other methods such as using overflow and width:auto doesn't work either.




The list is created by Joomla through a menu module.

html

<div id="DivN">
<jdoc:include type="modules" name="position-1" />
</div>


html (When viewing on browser)

<div id="DivN">
<ul class="nav menu nav-pills">

<li class="item-101 current active">
<a href="/site/">Home</a>
</li>

<li class="item-113">
<a href="/site/index.php?Itemid=113">School Info</a>
</li>

<li class="item-114">
<a href="/site/index.php?Itemid=114">Achievements</a>
</li>

<li class="item-115">
<a href="/site/index.php?Itemid=115">News &amp; Events</a>
</li>

<li class="item-116">
<a href="/site/index.php?Itemid=116">Parents &amp; Carers</a>
</li>

<li class="item-117">
<a href="/site/index.php?Itemid=117">Community</a>
</li>

<li class="item-118">
<a href="/site/index.php?Itemid=118">Contact Us</a>
</li>

</ul>
</div>


css

#DivN{
width:100%;
height:42px;
border-top:1px solid black;
border-bottom:1px solid black;
text-decoration:none;
background-color:black;
text-align:center;
font-size:13px;
font-weight:700;
}

#DivN ul{
list-style:none;
width:100%;
}

#DivN ul li{
display:inline-block;
/*float:left;*/
line-height:22px;
height:32px;
list-style-type:none;
margin:4px;
overflow:hidden;
width:auto;
}


I have already tried numerous ways for the past few days...
Yet none of what is found on the internet works.

I do not know what the classes added by Joomla do, nor do I know where they are.

The navigation bar looks like this: https://www.dropbox.com/s/5sw94euzbsgwvrc/Capture.PNG
When mouse is over a button: https://www.dropbox.com/s/lv73war905ii0rh/2.PNG

How can I get it so the list will take up all available space while they are the same size?

Answer

If equal width among the items is important to you, you can float the items to the left and give them a set equal width (this works when you know how many items you have. Alternatively, you can use js to determine the width if you have a variable number of menu items):

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#DivN ul li{
    float:left;
    line-height:37px;
    height:100%;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    width: 14.28571428571429%;
    cursor: pointer;
}
#DivN ul li:hover{
    background-color: gray;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
#DivN ul:before,
#DivN ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#DivN ul:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
#DivN ul {
    *zoom: 1;
}

Here is a fiddle: http://jsfiddle.net/kZb9C/

Updated to make the cf (clearfix) target your element: http://jsfiddle.net/4LUQe/16/

If you want to use the display: table approach, just remember to use display: table-cell on the <li> elements. Also, use vertical-align: middle if you want to vertically center them. (Note that table and table-cell CSS properties do not work in IE7 and below).

Here's a fiddle with the second approach (table): http://jsfiddle.net/kZb9C/1/

Comments