Home/ Questions/Q 7003063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:00:45+00:00

I decided to make my navigation links a styled-up <ul> . How can I

  • 0

I decided to make my navigation links a styled-up <ul>. How can I make the width of each <li> expand so that they cover the entire <ul>, i.e. the first one starts at left:0 and the last one ends at right:0?

How it looks at lower resolutions is not impor>tant. The red border is the <ul>, the blue one the surrounding <div>.

enter image description here

This is my current code:

div.nav_container {
    width:960px;
}
ul.nav {
    position:relative;
    list-style:none;
    padding-bottom: 10px;
    width:100%;
    border:1px solid red;
}
ul.nav li {
    margin:0 10px; padding:0;
    text-align:center;
    position:relative;
    float:left;
    width:13%;
    background-color:white;
    border:1px solid black;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    ul.nav li {
margin:0; padding:0;
text-align:center;
position:relative;
display: inline-block;
width: 158px;
background-color:white;
border:1px solid black;
}

    Width of nav container (960px) divided by number of list items (6) = 160px minus 2px for border (1px each side) = li width of 158px.

    • 0