HTML / CSSでリストを整理する

css html html-lists width

リストがあり、各項目に2つのセクションが必要です。 最初のセクションも固定幅にする必要があります。 それをどのようにコーディングすればいいですか。

私は定義リストを使ってみました:

foob​​ar ...
  1. and user lists with span:

foob​​ar ...

どちらもうまくいきませんでした。 それを行うための標準的な方法はありますか?

  1  0


ベストアンサー

Alanが言ったように、divを入れただけでは望みどおりに動作しない場合は、これを試してください。

foob​​ar foo12bar foo12345bar foo12345678bar

(おそらくリスト項目ごとにstyle属性を繰り返すのではなくクラスを使いたいのですが)

2


幅はインラインであるため、「」タグには適用されません。 タグを「」に置き換えてみてください

または「++」

または他のブロック要素

1


dlを使用してdtを左にフロートさせます。

dt {クリア:左;フロート:左。幅:8em;}


fooバーfoo1バー1 foo12345バー

1


私が思いついた方法は、おそらく標準的なものではありません(ただし、それを実装するための「標準的な」手段があると確信できないためだけです)が、うまくいきます。

#container {幅:50%;マージン:0自動。 }

ol、ul {border:1px solid #ccc;幅:90%。パディング:1.4em 0。 }

ol li、ul li {背景色:#ccc;左マージン:20%。 }

ol li span.list-head、ul li span.list-head {背景色:#ffa;フロート:左。表示ブロック;幅:6em。 }

dl {border:1px solid #ccc;行の高さ:1.4em。パディング:1.4em 0 0 0; }

dl dt {背景色:#ffa;表示ブロック;マージン:0。幅:10%。 }

dl dd {背景色:#fc0;表示ブロック;マージン:0。幅:88%。余白率:11%。位置:相対;上:-1.4em; }

...


Foo:バー

バー:バズ。

バズ:フー。



Foo:バー

バー:バズ。

バズ:フー。



Foo:バー

バー:バズ。

バズ:フー。
http://www.davidrhysthomas.co.uk/so/lists.html[]http://www.davidrhysthomas.co.uk/so/lists.html:上に作業のデモがあります。

1


最初の部分のラベルかインラインdivのどちらかを試してください。

0


私は尋ねたいのですが、これは表形式のデータを表すためのものですか。 私たちはHTMLテーブルは悪であると考えるようになってきましたが、データテーブルをうまく表示するためには完璧です。 複数のコーダーが `++`の機能を複製しようとするのを見てきました

`++`を使用したタグ

sとCSS

もちろん、そうでない場合は、続けてください。 🙂

0


タイトルとURLをコピーしました