0

すべておよびすべての書式設定が書式設定されていないリスト (list-style-type:none) で行われる html/css 実験を試みています。私がやりたいことは、垂直リストを水平リストに（ある程度）埋め込むことができるようにすることです。これまでのところ、水平リスト (li ... display:inline;) を垂直リストに埋め込むことができ、機能しますが、垂直リストを水平リスト内で真に垂直に表示することはできないようです。

これまでの私のCSSコードは次のとおりです。

* { 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：

<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」は水平方向の内側の垂直方向のリストとして動作していません。何か案は？基本的に、Web デザインのほとんどをリストのリストのリストにして、それを処理する DSL を考え始めることができるようにしたいと考えています。html/css マークアップ用に既に多くの DSL が存在することは知っていますが、css 側を制御したいと考えています。

4

2 に答える 2

0

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

<!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-19T21:27:42.320 に答える
0

display:blockうまくいくと思います

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

もう1つは、ユニバーサルセレクターでマージンとパディングを0pxに設定しているため、(*)別のマージン/パディングが必要でない限り、他の場所で行う必要はありません。

于 2012-04-08T15:59:23.440 に答える