list items horizontally rather than vertical using <ul><li> tags

Question

I have this web page

http://hashgurus.com/htmlpage7.html which lists items in

<li>    </li>  

vertically. But I need it to display horizontally. Which element in css should I use to display items horizontally rather than vertically?

this is the code:

<ul class="jobs">
        <li>
            <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

                <div class="company">desc1</div></li>

        <li>
            <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

                <div class="company">desc2</div></li>
    </ul>

demo page: http://hashgurus.com/htmlpage7.html

Solution 1

.jobs {
list-style-type: none;
padding:0;
margin:0;
}

.jobs > li {
display: inline-block;
}

Something like that perhaps?

Solution 2

You can make your list elements align horizontally by specifying the display property with inline.

An example of this below:

li{display:inline}

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

Solution 3

You can use float but you need to clear after it or will have layout problems.

Example :

.jobs {
  list-style: none;
}

.jobs li {
  float: left;
  margin-left: 12px;
}

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

<ul class="jobs">
  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc1</div>
  </li>

  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc2</div>
  </li>
</ul>

Solution 4

use

li {
    float: left;
}

for floating the list elements to the left.

View more solutions

Comments

[j08691]

You can float the list items left or change their display to inline or inline block.

[EyasSH]

possible duplicate of How to style the UL list to a single line

[Vitorino fernandes]

first thing you have not closed ul tag and second the inline elements gives extra whitespace between them jsfiddle.net/vg1f4nku so it will not work if OP gives width:50%