how to make an ul lay out horizontally?


Tags: html,css

Problem :

An example of what I need to do is seen at the top of the Techcrunch homepage, it is the "HOT TOPIC" row of clickable items which looks like this:

HOT TOPICS APPLE ANDROID FUTURE OF FOXCONN GOOGLE FACEBOOK DIASPORA

See http://techcrunch.com/.

I looked at CSS styles for the 'ul' tag and 'li' tag and I don't see anything there using CSS that would allow me to tell the browser "Mr. Browser, here is an unordered list. While I realize, Mr. Browser, that you normally stack the ul's list items vertically, please instead display the list items horizontally this time -- thanks."

I did not see anything in CSS that would allow me to tell the 'ul' to lay out the list items horizontally -- so how is the following code making that happen

Here is the 'ul' unordered list code that does this on the Techcrunch page:

<div class="hot-topics-container">
<h4>**Hot topics**</h4>
<ul id="menu-hot-topic-menu" class="hot-topics">

    <li id="menu-item-398682" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398682"><a href="http://techcrunch.com/tag/apple/">**Apple**</a></li>
    <li id="menu-item-394815" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-394815"><a href="http://techcrunch.com/tag/android/">**Android**</a></li>
    <li id="menu-item-399998" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-399998"><a href="http://techcrunch.com/tag/future-of-foxconn/">**Future Of Foxconn**</a></li>
    <li id="menu-item-398687" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398687"><a href="http://techcrunch.com/tag/google/">**Google**</a></li>
    <li id="menu-item-398668" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398668"><a href="http://techcrunch.com/tag/facebook/">**Facebook**</a></li>
    <li id="menu-item-435062" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-435062"><a href="http://techcrunch.com/tag/diaspora/">**Diaspora**</a></li>
</ul>               
</div>

I tried using li float:left as follows, no change though.

<head>
<style type="text/css">
 li{float:left;}
</style>
</head>

<ul>
<li>
    <a href="http://localhost/mysite/landingpage.htm">
    <img src="http://localhost/mysite/someImage.png"
     alt="http://localhost/mysite/someImage.png"
     /img>
   </a>
</li>
<li>
    This text needs to appear to the right of the 1st list item
</li>
</ul>

FIGURED IT OUT FOLKS! Here is what I had to do -- I did not float the li at all. I had to float the image, which surprises me but hey it works I'll go with it. Here is the code. In this code, the 2nd list item, which is text, appears to the immediate right of the image starting at the very top of the image's topmost edge:

<head>
  <style type="text/css">
   #horizUL1
   {
      list-style:none;  /* turns off the 'bullets' for this list type */
   }    

   #horizListImg
   {
      float:left;
   }
  </style>
</head>

<ul id="horizUL1">
<li>
    <a href="http://localhost/mysite/landingpage.htm">
    <img id="horizListImg" src="http://localhost/mysite/someImage.png"
     alt="http://localhost/mysite/someImage.png"
     /img>
   </a>
</li>
<li>
    This text needs to appear to the right of the 1st list item
</li>
</ul>


Solution :

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;
}

    CSS Howto..

    How to align image next to text and then stack them (responsive)

    How to stop html/css object from resizing

    How to use css image sprites in this code?

    How to add a style to