Home/ Questions/Q 8782187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T20:30:35+00:00

Goal: I would like the menu items to take up the same amount of

  • 0

Goal: I would like the menu items to take up the same amount of space in regards to each other. When stretching the display space, I would not like menu items to collapse to their own line. Instead, I would like them to get closer and closer together.

attempt 1:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<style>
    #container{
        width: 100%;
    }


    #navigation{
        width: 100%;
        background: #333;
        display: table;
    }
    #navigation ul{
        margin:0px auto;
        padding: 0 0 0 0;
        display: table-row;

    }
    #navigation li{
        list-style-type: none;
        display: inline;
        display: table-cell;
    }
    #navigation li a{
        float: left;
        /*padding: 5px 10.2%;*/
        padding: 5px;
        color: #FFFFFF;
        text-decoration: none;
        text-align: center;
    }
    #navigation li a:hover{ 
        background: #1C5EC2; 
    }
</style>

</head>
<body>
    <div id="container">
        <div id="navigation">
            <ul>
                <li><a href="#" alt="Home"        >Home</a>        </li>
                <li><a href="#" alt="Games"       >Games</a>       </li>
                <li><a href="#" alt="High Scores" >High Scores</a> </li>
                <li><a href="#" alt="Contact Us"  >Contact Us</a>  </li>
            </ul>
        </div>
    </div>
</body>
</html>

Although these items all stay together horizontally, they are not equally spaced apart. Also, highlighting over them does not shade as wide of an area as I would like.

attempt 2:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<style>
    #container{
        width: 100%;
    }


    #navigation{
        float: left;
        width: 100%;
        background: #333;
    }
    #navigation ul{
        margin: 0;
        padding: 0;
    }
    #navigation ul li{
        list-style-type: none;
        display: inline;
    }
    #navigation li a{
        display: inline;
        float: left;
        padding: 5px 10.3%;
        color: #FFFFFF;
        text-decoration: none;
    }
    #navigation li a:hover { background: #1C5EC2; }
</style>

</head>
<body>
    <div id="container">
        <div id="navigation">
            <ul>
                <li><a href="#" alt="Home"        >Home</a>        </li>
                <li><a href="#" alt="Games"       >Games</a>       </li>
                <li><a href="#" alt="High Scores" >High Scores</a> </li>
                <li><a href="#" alt="Contact Us"  >Contact Us</a>  </li>
            </ul>
        </div>
    </div>
</body>
</html>

This example is almost exactly what I want. Everything about this is correct, except that stretching the display size smaller puts menu items on a line below the other items.

How can I can I take the non-wrapping behavior of the first attempt, and apply it to my second attempt? My goal is to have a working implementation of the 2nd attempt that does not wrap menu items.

*note: i have separate CSS files and html involved, but I included only what I think is needed for the problem. thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here – I’ve made a fiddle. Is this what you are looking for?
    link

    I’ve changed the CSS for your li and a elements:

    #navigation ul li {

    list-style-type: none;
    float: left;
    width: 25%;    
    text-align: center;
}


#navigation li a {

    color: #FFFFFF;
    text-decoration: none;
    padding: 5px 0px;
    display: block;    
}
    • 0