水平に配置された順序付けられていないリスト要素にブロック要素を含めることは可能ですか

水平に配置するアイテムのリストがあります。それは基本的にキャプション付きの一連の写真です。何かのように水平に配置された順序付けられていないリスト要素にブロック要素を含めることは可能ですか

picture1 picture2 picture3 
caption1 caption2 caption3

私はそれがList： "display：inline"でスタイル付けされたリストと順序付けられていないリストであると考えました。しかし、キャプションはブロック要素である必要はありそうでない場合は、次のように行に印字されています

picture1 caption1 picture2 caption2 ...

しかし、彼らはブロック要素にいるときにリストが垂直のまま：

picture1 
caption1 
picture2 
caption2 
picture3 
caption3

私はフローティングdivを使用する必要がありますかこの場合のリストの代わりに？この仕事をする最も良い方法は何ですか？

以下は、画像の代わりにdivsを使用した完全な例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head> 
<title>Blah</title> 
<style type="text/css"> 

.myclass li{ 
    list-style: none; 
    display: inline; 
} 
.item{ 
    display: inline; 
} 

</style> 
</head> 
<body> 

<div class="myclass"> 
    <ul> 
    <li><div class="item"><a href="http://google.com">one</a><p>uno</p></div></li> 
    <li><div class="item"><a href="http://google.com">two</a><p>dos</p></div></li> 
    <li><div class="item"><a href="http://google.com">three</a><p>tres</p></div></li> 
    </ul> 
</div> 

</body> 
</html>

出典

2009-04-01 dl__

ブロックレベルの要素がある場合は、コンテナがインラインで表示されていても、すべてのレイアウトが下に移動します。

あなたのLIをフローティングにする方法です。あなたはそれらの中に任意のコンテンツを持つことができます。

出典

2009-04-01 19:26:07 Seb

divは不要です。 .myclass liをdisplay: inline-blockに設定するだけです。

出典

2009-04-01 19:27:18

私はそれを試してみましたが、Firefoxで動作しているようではなく、IE7。しかし、良い情報。私はそのオプションを知らなかった。 –

私はあなたのページがIE7を奇妙なモードにしているとか、何か重要なことを忘れてしまったと思います。 ;-) –

li要素のdivは冗長です。ここではそれを行うための最も簡単な方法は次のとおりです。

HTML：

<ul id="captions"> 
    <li><a href="#"><img /></a><p>Caption here</p></li> 
    <li><a href="#"><img /></a><p>Caption here</p></li> 
    <li><a href="#"><img /></a><p>Caption here</p></li> 
    <li><a href="#"><img /></a><p>Caption here</p></li> 
</ul>

CSS：

#captions { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
#captions li { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:200px; 
    height:220px; 
    float:left; 
    text-align:center; 
}

出典

2009-04-02 00:15:17

水平に配置された順序付けられていないリスト要素にブロック要素を含めることは可能ですか

答えて

関連する問題