(New) Making a horizontal list

Question

I was asked to make a horizontal menu for my website, which in essence is just a unordered list, this is necessary. However I can not get it out of its "vertical state".

At the moment this is my HTML code for my list itself;

<ul id="horizontaal">
        <li><a href="index.html">Index</a></li>
        <li><a href="mijnsoftware.html">Mijn Software</a></li>
        <li><a href="browsers.html">Browsers</a></li>
        <li><a href="registratie.html">Registratie</a></li>
    </ul>

In CSS this is;

 ul li {
     background-color: grey;
     border: 5px solid #999999;
     list-style-type: none;
     margin-bottom: 5px;
     margin-top: 5px;
     text-align: center;
     padding: 3px;
     width: 10%;
     float: left;
     clear: both;
     width:150px;

 }
 ul  {
     margin-bottom: 70%;
     margin-right: 100px;
     float: left;

 }

And for this horizontal list in special:

 #horizontaal {
        width: 100%;
    }

#horizontaal li {
    width: 10%;
    margin-right: 0px;
    margin-left: 0px;
    float: left;
    display: inline;
}

It is required that the list takes up around 100% of the width of my screen.

https://i.stack.imgur.com/gQMjV.png

EDIT:

I didn't notice I had that much blatant errors in my code, I'm sorry for that I should've taken some more time before posting; my sincere apologies.

As for the code this is what I have now:

ul li {
     background-color: grey;
     border: 5px solid #999999;
     list-style-type: none;
     margin-bottom: 5px;
     margin-top: 5px;
     text-align: center;
     padding: 3px;
     width: 150px;



 }
 ul  {
     margin-bottom: 70%;
     margin-right: 100px;
     float: left;

 }

#horizontaal {
    width: 100%;
}

#horizontaal li {
    width: 10%;
    margin-right: 0px;
    margin-left: 0px;
    display: inline;

}

My list seems to be aligned horizontally now, but my excercise states the following: "Make the list items float. The list itself may not float." But I've read on the comments that the inline display cannot be in conjunction with float?

float:left and display:inline are incompatible. No more need for floats nowadays anyway, just go for inline-block as suggested. And do some more searching, this has been done a million times! — Pevara, Feb 24 '14 at 20:07
In your first CSS rule you set the width twice. Why? Then you float and clear. Why? — j08691, Feb 24 '14 at 20:07

score 0 · Answer 1 · answered Feb 24 '14 at 20:07

0

you try this CSS code to make the menu in horizontal .

ul{list-style-type:none;}
ul li{display:inline-block; background-color:#ef8913; padding:5px;}
ul li a{ color:blue}

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

Here is the working link. http://jsbin.com/kunavupa/1/edit

answered Feb 24 '14 at 20:07

Kheema Pandey

9,977
4
25
26

1

You should apply your solution to the code provided, not to something completely different – Zach Saucier Feb 24 '14 at 20:08

score 0 · Answer 2 · answered Feb 24 '14 at 20:21

0

Try this jsfiddle.

Your only problem with what you did, is you had float: left on every ul and li, taking just that out fixed your problem.

answered Feb 24 '14 at 20:21

PixelAcorn

494
8
26

score 0 · Answer 3 · answered Feb 24 '14 at 20:23

0

You need to set a display property. Other possible options for display: are (inline-block, block.. etc). I'd use

ul li {

display:block

}

answered Feb 24 '14 at 20:23

rivtracks

43
7

(New) Making a horizontal list

3 Answers3