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 Can I Override Style Info from a CSS Class in the Body of a Page?

    How to create a vertical carousel using plain JavaScript and CSS

    How to move the Google Chart's annotation to the top or anywhere with CSS?

    How to add slide animation when showing elements

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    CSS how to show menu sub li when menu has position fixed

    How to create CSS gradient from the centre? [closed]

    How to to select the last class or last of type in css

    How do I light up an entire single row by hovering on a span in one of the columns?

    How to make carousel have a max width, and load without resize

    How can I rotate(or change) background image using CSS and Javascript

    How to vertically align image in a td cell, without vertically-align

    How do I center a character in a box using CSS?

    How to define the css :hover state in a jQuery selector?

    How to draw realistic smooth slit shadow with Pure CSS3?

    CSS - How to add a second gradient to make this button half transparent?

    How to make the Div fixed at a particular scroll location?

    How to change css dynamic by javascript

    How can I center a div

    How to prevent CSS/Javasript on specific selectors using Id?

    How to center a container and make webpage fit on mobile?

    How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

    How to call apk font use CSS in android?

    CSS - How to make a text to be shown under the center of an element, no matter how long the text is

    how can i style processing.js element?

    In CSS, how to toggle the tab color if it was selected (without using javascript)

    How To Set CSS Classes On HTML Tags Which Are Included In The Page With PHP Include's

    How to generate image sprites in ember-cli using compass?

    How to draw a CSS petagon with all borders radius?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?