试图让这些列表项内联显示

时间:2010-03-15 20:22:25

标签: css list

我有几个无序列表,我想这样显示:

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

//linebreak 

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

...etc

我无法让li物品与彼此串联。它们垂直堆叠。我已经剥离了大部分样式,但仍然无法弄清楚我做错了什么:

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

4 个答案:

答案 0 :(得分:2)

p元素是一个块元素,所以它是否是一个内联元素,例如你的li它将强制它的'框。

我认为你想要的效果是内联块(在li上)

li.textbox {
    display: inline-block;
}

答案 1 :(得分:1)

ul.instrument li {
   float: left;
}

答案 2 :(得分:0)

您需要将display:inline放在<li>元素上,而不是<ul>元素。

答案 3 :(得分:0)

浮动通常是你最好的选择。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            ul {
                list-style: none;
            }
            li {
                float: left;
            }
            li.imagebox {
                width: 247px;
                margin-right: 10px;
            }
            li.textbox {
                width: 600px;
            }
            li.textbox p {
                display: inline;
            }
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <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>
        <div class="clear"></div>
        <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>
        <div class="clear"></div>
        <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>
        <div class="clear"></div>
        <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>
        <div class="clear"></div>
        <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>
        <div class="clear"></div>
    </body>
</html>