0

これは簡単なはずですが、おそらく不可能です:)

この種のHTML出力があります

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

そして、私はそれが次のように表示されることを望みます

one two three
    a   b

純粋なCSSでこれを行うにはどうすればよいですか? 必要に応じて、HTML をある程度変更することもできます (ただし、変更したくはありません)。

4

4 に答える 4

4

You're asking about "pure" CSS. Pure CSS is to use the best semantic tag for the job, and that means that if you really have tabular data, which this looks like it might be, than you should use a table.

于 2009-08-20T17:03:41.350 に答える
1

いくつかのフロートと絶対配置でこれを達成できます

ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul.first {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 30px; left: 0; margin-top: 30px;}
ul.second {position: absolute; top: 30; left: 50;}

と

<ul class="first">
   <li>one</li>
   <li>two
      <ul class="second">
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>
于 2009-08-20T17:43:32.360 に答える
0

You can use the css tag "list-style-type:none" ie

ul li { list-style-type: none; display: inline; }

ul li ul li { list-style-type: none; display: inline; }

于 2009-08-20T17:03:43.347 に答える
0

Zac の回答をさらに進めるには、HTML をまったく変更せずに CSS のアドレス指定を行うことができます。次に、次のようになります。

<style>
ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul  {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 20px; left: 0; margin-top: 30px;}
ul li ul {position: absolute; top: 20; left: 0;}
</style>

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>
于 2009-08-21T18:14:34.457 に答える