Trying to get these list items to display inline

Posted by Joel on Stack Overflow See other posts from Stack Overflow or by Joel
Published on 2010-03-15T20:22:25Z Indexed on 2010/03/15 20:29 UTC
Read the original article Hit count: 337

Filed under:
|

I have several unordered lists that I want to display like this:

<ul>
<li><img></li> <li><p></li>  //inline
</ul> 

//linebreak 

<ul>
<li><img></li> <li><p></li> //inline
</ul> 

...etc

I'm not able to get the li items to be inline with eachother. They are stacking vertically. I have stripped away most styling but still can't figure out what I'm doing wrong:

html:

<ul class="instrument">

      <li class="imagebox"><img src="/images/matepe.jpg" width="247" height="228" alt="Matepe" /></li>
      <li class="textbox"><p>The matepe is a 24 key instrument that is played by the Kore-Kore people in North-Eastern Zimbabwe and Mozambique. It utilizes four fingers-each playing an individual melody. These melodies also interwieve to create resultant melodies that can be manipulated thru accenting different fingers. The matepe is used in Rattletree as the bridge from the physical world to the spirit world.  The matepe is used in the Kore-Kore culture to summon the Mhondoro spirits which are thought to be able to communicate directly with Mwari (God) without the need of an intermediary.</p></li>
 </ul> 
    <ul class="instrument">
     <li class="imagebox"><img src="/images/soprano_little.jpg"  border="0" width="247" height="170" alt="Soprano" /></li>
     <li class="textbox"><p>The highest voice of the Rattletree Marimba orchestra is the Soprano marimba.  The soprano is used to whip up the energy on the dancefloor and help people reach ecstatic state with it's high and clear singing voice.  The range of these sopranos goes much lower than 'typical' Zimbabwean style sopranos.  The sopranos play the range of the right hand of the matepe and go two notes higher and five notes lower.  Rattletree uses two sopranos.</p></li>
 </ul> 
<ul class="instrument">
         <li class="imagebox"><img src="/images/bari_little.jpg"  border="0" width="247" height="170" alt="Baritone" /></li>
     <li class="textbox"><p>The Baritone is the next lower voice in the orchestra.  The bari is where the funk is.  Generally bubbling over the Bass line, the baritone creates the syncopations and polyrhythms that messes with the 'minds' of the dancers and helps seperate the listener from the physical realm of thought.  The range of the baritone covers the full range of the left hand side of the matepe.</p></li>
 </ul>
    <ul class="instrument">
      <li class="imagebox"><img src="/images/darren_littlebass.jpg"  border="0" width="247" height="195" alt="Bass"/><strong>Bass Marimba</strong></li>
      <li class="textbox"><p>The towering Bass Marimba is the foundation of the Rattletree Marimba sound.  Putting out frequencies as low as 22hZ, the bass creates the drive that gets the dancefloor moving.  It is 5.5' tall, 9' long, and 4' deep.  It is played by standing on a platform and struck with mallets that have lacross-ball size heads (they are actually made with rubber dog balls).  The Bass marimba's range covers the lowest five notes of the matepe and goes another five notes lower.</p></li>
 </ul>
<ul class="instrument">
      <li class="imagebox"><img src="/images/wayne_little.jpg"  border="0" width="247" height="177" alt="Drums"/><strong>Drumset</strong></li>
      <li class="textbox"><p>All the intricate polyrhythms are held together tastefully with the drumset.  The drums provides the consistancy and grounding that the dancers need to keep going all night.  While the steady kick and high-hat provide that grounding function, the toms and snare and allowed to be another voice in the poylrhythmic texture-helping the dancers abandon the concept of a "one" within this cyclical music.</p></li>

</ul>

css:

ul.instrument {
   text-align:left; 
   display:inline;   
}

ul.instrument li {
   list-style-type: none;
}

li.imagebox {
}

li.textbox {
}

li.textbox p{
    width: 247px;
}

© Stack Overflow or respective owner

Related posts about css

Related posts about list