How to Make a ≪Ul≫ Display in a Horizontal Row

How to make a ul display in a horizontal row

List items are normally block elements. Turn them into inline elements via the display property.

In the code you gave, you need to use a context selector to make the display: inline property apply to the list items, instead of the list itself (applying display: inline to the overall list will have no effect):

#ul_top_hypers li {
    display: inline;
}

Here is the working example:

#div_top_hypers {    background-color:#eeeeee;    display:inline;      }#ul_top_hypers li{    display: inline;}

<div id="div_top_hypers">    <ul id="ul_top_hypers">        <li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>        <li>‣ <a href="" class="a_top_hypers"> Compose</a></li>        <li>‣ <a href="" class="a_top_hypers"> Reports</a></li>        <li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>        <li>‣ <a href="" class="a_top_hypers"> logout</a></li>    </ul></div>

How can i display li elements horizontally

You could replace

li {
  display: inline !important;
}

with

li {
  display: inline-block;
}

Difference b/n them here. Also try to use !important as sparingly as possible.

Working example: Stackblitz

Why my UL lists are displayed horizontal?

Since you want your <ul> to be horizontal, you have used row incorrectly.
It should have been applied as class and not to be used as a Tag, considering you are using bootstrap.
Read more about the bootstrap griding system from here - https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.row::after {
  display: table;
  clear: both;
  content: "";
}

.col-5 {
  width: 41.66%;
}

<footer class="grey">
  <div class="row">
    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carrers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>
  </row>
</footer>

display UL LI items inline in a bootstrap row

Use the d-inline class...

<ul class="list-unstyled">
    <li class="d-inline"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-instagram"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-yelp"></i></a></li>
</ul>

https://www.codeply.com/go/DaDD3njGFz

How to display a list in horizontal groups of li elements?

Floats can do this quite simply.

You just clear the float after every this li

ul {  list-style-type: none;}li {  float: left;  padding: 0 1em;}li:nth-child(3n+1) {  clear: both;}

<ul>  <li>Item 1</li>  <li>Item 2</li>  <li>Item 3</li>  <li>Item 4</li>  <li>Item 5</li>  <li>Item 6</li>  <li>Item 7</li>  <li>Item 8</li>  <li>Item 9</li></ul>

how to make an ul lay out horizontally?

The css that makes the list display vertical is found in:

.module-header .hot-topics li {
  float: left;
}

Float is quite a difficult concept, I find it is best explained on A
List Apart

The css that hides the bullet for the list items is in:

li {
  list-style: none;
}

Horizontally align li in ul on multiple rows

Use Parent Styles as

{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

How to create a horizontal UL which shows 3 items per line?

I like to use float for this

ul.items
{
  text-align: center; 
  list-style-type: none;  
  width: 400px;
}

ul.items li
{
    float: left; 
    display: inline;     
}

.clear { clear: both; }

with this html:

<ul class="items">
  <li>
   <input type="checkbox" id="work" />
    Work items
   </li>
  <li>
   <input type="checkbox" id="shopping" /> 
    Shopping
    </li>
  <li>
   <input type="checkbox" id="financial" />
    Financial Information & Tips
    </li>
  <li class="clear"></li>
</ul>

Demo here: http://jsfiddle.net/hG3Us/

How to Make a ≪Ul≫ Display in a Horizontal Row