縦と横のネストされたリスト？

私はすべてのフォーマットがフォーマットされていないリスト（list-style-type：none）で実行されるhtml/css実験を試みています。私がしたいのは、縦リストを横リストに（またはその逆に）埋め込むことができるようにすることです。今のところ私は水平リスト（li ... display：inline;）を垂直リストに埋め込むことができますが、それは機能しますが、水平リストの中に垂直リスト表示を本当に垂直にすることはできません。縦と横のネストされたリスト？

* { margin:0; padding:0; } 
body { margin: 0px; color:#333; } 
ul.mainlist { list-style-type:none; margin: 0px; } 
.mainlist li { margin:0px; padding:0px; } 
ul.horizontallist { list-style-type:none; margin: 0px; padding:0px; } 
.horizontallist li { margin:0px; padding:0px; display: inline-block; } 
ul.secondlist { list-style-type:none; margin: 0px; padding:0px; } 
.secondlist li { margin:0px; padding:0px;}

そして、私のhtml：ここ

は私のCSSコードは、これまでのところだこれまでのところ

<body> 
    <ul class="mainlist"> 
     <li> 
     <ul class="horizontallist"> 
      <li> 
      <ul class="secondlist"> 
       <li>First in second vertical list.</li> 
       <li>Second in second vertical list.</li> 
      </ul> 
      </li> 
      <li>the snow in Alaska.</li> 
      <li>the rain in Spain.</li> 
     </ul> 
     </li> 
     <li>Part of Mainlist</li> 
    </ul> 
    </body>

"secondlistは" 水平内部の垂直リストとして動作していません。何か案は？基本的には、リストのリストとして私のウェブデザインの大部分を手に入れたいので、DSLを扱うように考えることができます。私は、HTML/CSSのマークアップのためにすでに存在するDSLがたくさんあることを知っていますが、私は物事のCSS側をコントロールしたいと思います。

出典

2012-04-08 galaxybeing

私は他の場所で行う必要はありません（*）、あなたは余裕とユニバーサルセレクタに0PXするパディングを設定しているためdisplay:blockは、

.secondlist li { margin:0px; padding:0px; display:block;}

と別の事を働くだろうと言うでしょう異なるマージン/パディングが必要な場合を除きます。

出典

2012-04-08 15:59:23

ありがとうございます。それが助けになりました。しかし、「水平主義者」の続行をトップに向けて行う方法があるだろうか？あなたの提案で私は "アラスカの雪"を得ています。と "スペインの雨。" 「第2の垂直リストの第2位」の隣に続きます。私は、「第2の縦リスト」の横の一番上にそれらを表示したい。水平リストに埋め込まれた準ドロップダウンメニューのように表示されます。 – galaxybeing

私はあなたの言うことを理解していますが、これが可能かどうかわかりません。それは可能かもしれないが、私はそれを行う方法を知らない。 divを使用しますが、あなたはリストを使用したいと言います。要約すると、私は知らない。 –

私はいくつか
のように "

横のリストで秒。

余分なテキスト。

"それは実際に垂直方向のリストを移動します。しかし、それはかなり醜いkludgeです。 – galaxybeing

これがあなたの意図であるかどうかはわかりません。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
* {margin:0;padding:0;} 
body {color:#333;} 
ul.mainlist, ul.mainlist ul {list-style-type:none;} 
ul.mainlist li, ul.horizontallist {display:inline-block;vertical-align:top} 
ul.secondlist li {display:block} 
</style> 
</head> 

<body> 
<body> 
<ul class="mainlist"> 
     <li> 
       <ul class="horizontallist"> 
         <li> 
           <ul class="secondlist"> 
             <li>First in second vertical list.</li> 
             <li>Second in second vertical list.</li> 
             <li>Third in second vertical list.</li> 
           </ul> 
         </li> 
         <li>the snow in Alaska.</li> 
         <li>the rain in Spain.</li> 
       </ul> 
     </li> 
     <li>Part of Mainlist</li> 
</ul> 
</body> 
</html>

出典

2014-10-19 21:27:42

縦と横のネストされたリスト？

答えて

関連する問題