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 do I get content to overflow into another div if there is room, using css?

    How can I make these floated divs wrap properly?

    LESS: How to specify current tag with nesting?

    jQuery addClass based on how far scrolled

    how to read the following css class

    How can I make a background image of a site start off fitting to screen and then zoomable?

    Modernizr: how do I detect CSS display:table-cell support?

    How this switch button work by CSS?

    html/css: how to on a single line center “title” and have on right buttons

    How to sort and combine this css rules so it doesn't repeat so much?

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    wordpress submenu css show on parent active and child active

    jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

    In laravel 4, How to render in template (blade) plain css or js from file?

    How can I modify my four quadrants to allow some “breathing room” between them (HTML/CSS)?

    show loading image before the content loads through jquery or ajax

    How do I use CSS transformations to slide a div on screen?

    css. How to write (code) css for different window widths?

    How to give css when span tag within double quotes

    How to fix error from posting html element and prevent it from running

    How to use css to keep horizontal visible when vertical is auto?

    How to have menu items streched in full width menu with css for any screen automatically

    How to set class on div that is inside of repeater in code behind?

    How to morph a plus sign to a minus sign using css transition?

    CSS Transitions using AngularJS ng-show

    How to center text vertically in a flex box?

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    How to rotate text using CSS

    How can I properly display my divs in masonry style using flex?

    how to show ng-repeat horizontal?