CODEWITHSUNDEEP
htmlcsslist
Roy Hinkley
Roy Hinkley

Reputation: 10641

UL tag list items won't display horizontally

I have an HTML document that I want to display a simple list horizontally. There is a plethora of examples on how to do this, but my list will not display horizontally:

HTML:

<div id="main_menu">
   <ul>
      <li><a href="#1">Link 1</a></li>
      <li><a href="#2">Link 2</a></li>
      <li><a href="#3">Link 3</a></li>
   </ul>
</div>

CSS:

#main_menu ul{  
    margin: 0;
    padding: 0;
    list-style-type: none;

}

What am I not understanding - why is it not displaying horizontally?

I am testing in Chrome.

Upvotes: 0

Views: 1002

Answers (4)

Tashrik Anam
Tashrik Anam

Reputation: 56

There are more than one option.

Float: 

#main_menu ul li{
    float:left;
}

Flex Box: 

#main_menu ul {
    display: flex;
    justify-content: space-around; /* or other */
}

Display Inline Block:

#main_menu ul {
    display: inline-block;
    justify-content: space-around; /* or other */
}

Upvotes: 0

shashank obulampalli
shashank obulampalli

Reputation: 351

Please use float: left on your li elements to float them horizontally. Please refer to the below example https://jsfiddle.net/osha90/n2ujqzvo/

<div id="main_menu">
 <ul>
  <li><a href="#1">Link 1</a></li>
  <li><a href="#2">Link 2</a></li>
  <li><a href="#3">Link 3</a></li>
 </ul>
</div>

css 

#main_menu ul{  
        margin: 0;
        padding: 0;
        list-style-type: none;

    }
    #main_menu ul li{
      float:left;
      width: 33.33%;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #d2d2d2;
    }
    #main_menu ul li a{
      text-decoration: none;
    }

Upvotes: 0

j08691
j08691

Reputation: 207891

You either need to float the list items or change their display to inline-block:

Example 1 - Floats

#main_menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  float: left;
}
<div id="main_menu">
  <ul>
    <li><a href="#1">Link 1</a>
    </li>
    <li><a href="#2">Link 2</a>
    </li>
    <li><a href="#3">Link 3</a>
    </li>
  </ul>
</div>

Example 2 - Display:inline-block

#main_menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  display: inline-block;
}
<div id="main_menu">
  <ul>
    <li><a href="#1">Link 1</a>
    </li>
    <li><a href="#2">Link 2</a>
    </li>
    <li><a href="#3">Link 3</a>
    </li>
  </ul>
</div>

Upvotes: 3

Jacob G
Jacob G

Reputation: 14172

To make a list display horizontal, either float the <li>'s left, or display them inline or inline-block:

#main_menu li{
    display:inline-block;
}

JSFiddle Demo

Upvotes: 2

Related Questions