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 make layers not overlap with each other in css [closed]

    How to make button look like a link?

    how to set icon and text inline on header of in phonegap app?

    How do I get a bold version of a custom font?

    How can i overlap inline divs?

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used

    How to add CSS class attribute for Html helper methods in asp.net mvc (VB.NET)?

    How to position one element relative to a separate element in CSS

    “How to Ask” box when typing a question in SO. How do get that scrolling effect? Pure CSS or JS?

    How to vertically center image and text in a block element? [CSS]

    How can I switch overlapped elements with CSS transitions?

    How to place the block on the top of “second” screen using CSS?

    How to avoid text go below the thumbnail with css

    How to get resultant HTML after executing all scripts?

    Difference in css position IE/FF, how to solv my problem?

    How to create double border which is not touching to edges in pure css?

    How to apply a CSS class to all instances of a control in ASP.NET

    How to apply information submitted in Code Mirror? [closed]

    how to show a portion of image like on 9gag.com

    How to make CSS visible only for Android phone UC browser

    How to move hamburger menu to the front of overlay menu

    How To Adjust CSS List On Hover Image

    How to make two lines text inside list-item element of bootstrap? [closed]

    How to inline style an embedded gist with CSS

    How To Display first 50 characters Of Text [closed]

    How do i make my divs scrollable ONLY when the content is full?

    Understanding how VS parses CSS in .ascx docs

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    How to place two divs side by side using css

    css: how to center box div element directly in center?