lists_html/css_WEB-ITnose 間のネスト問題の作成を手伝ってください。

[img=http://b308.photo.store.qq.com/psb?/2a2c138b-2138-4b25-88ba-2e534a7d1b9d/q2X9ID5uXEbQrmmF47UhgMVmcK*H7WdJNnpTLEPrFto!/b/YWLGn7fxGAAAYmIkmLcbGQAA][/img]

最好是列表与列表的嵌套的，因为要后台传入数据。。

<div style="height:230px;width:100%; text-align:center; float:left; margin-top:0px;">
 <ul class="goods_pic">
  <Li class="f2">
   <ul id="foot_kind">
     <li>品牌女装</li>
     <li style="width:110px;text-align:center;"><a style=" width:50px;overflow:hidden;"><img src="dd.png" /></a></li>
     <li id="foot_kind_01">
      <ul>
       <li>太虚</li>
       <li>|</li>
       <li>太虚</li>
       <li>太虚</li>
       <li>|</li>
       <li>太虚</li>
      </ul>
     </li>
   </ul>
  </Li>
  <Li class="f2"><a><img src="aa.jpg" /></Li>
  <Li class="f2"><a><img src="aa.jpg" /></a></Li>
  <Li class="f2"><a><img src="aa.jpg" /></a></Li>
  <Li class="f2"><a><img src="aa.jpg" /></a></Li>
  <Li style="margin-right:0px;" class="f2"><a><img src="aa.jpg" /></a></Li>
 </ul>
</div>

ディスカッションに返信 (解決策)

わかりました、私の文献学が良くないことを認めます

わかりました、私の文献学が良くないことを認めます
以下のコードは無視してください。 。正確なレイアウトを書いてもらえますか?

1 階の返信からの引用:

さて、私の中国語スキルが良くないことは認めます

以下の私のコードは無視してください。 。正確なレイアウトを書いてもらえますか?


重要なのは、私もあなたの写真を見ることができないということです

2 階の返信からの引用:

1 階の返信からの引用:

わかりました、私の中国語スキルが良くないことを認めます

無視します以下のコード。 。正確なレイアウトを書いてもらえますか?



重要なのは、私もあなたの写真を見ることができないことです
タオバオモールのフッターのように...

3階の返信からの引用：
2階の返信からの引用：

1階の返信からの引用フロアの返信:

わかりました、私の中国語スキルが良くないことは認めます

以下のコードは無視してください。 。正確なレイアウトを書いてもらえますか?



重要なのは、私もあなたの写真を見ることができないということです

タオバオモールのフッターと同じように...



コードはすでにあるのに、なぜまだコードを書くのですか? ? ?

<style>#category{ font-size:12px;}#category label{ font-weight:bold; height:30px; line-height:30px;}#category ul{ list-style-type:none;}#category > ul,#category li ul{ margin:0; padding:0px;  width:auto; overflow:hidden;}#category > ul > li{ float:left; width:21%; border:solid 1px #ccc; padding:1%; margin:1%;}li li{ float:left; margin:5px 3px; padding:0 5px;border-left:solid 1px #ccc;}li li:first-child{ border-left:none;}</style><div id="category">    <ul>        <li>             <label>品牌女装</label>             <img src="my image path" />            <ul>                <li>连衣裙</li>                <li>T?</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T?</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T?</li>                <li>衬衫</li>                <li>婚纱</li>            </ul>        </li>        <li>             <label>时尚男装</label>             <img src="my image path" />            <ul>                <li>连衣裙</li>                <li>T?</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T?</li>                <li>衬衫</li>                <li>婚纱</li>                <li>连衣裙</li>                <li>T?</li>                <li>衬衫</li>                <li>婚纱</li>            </ul>        </li>    </ul></div>

4 階の回答より引用:

3 階の回答より引用:
2 階の回答より引用:

1 階の回答より引用:

はい、私の中国語が下手であることは認めます。

以下の私のコードは無視してください。 。正確なレイアウトを書いてもらえますか?



重要なのは、私もあなたの写真を見ることができないということです

タオバオモールのフッターと同じように...




コードはすでにあるのに、なぜまだコードを書くのですか? ? ?
いいえ、ul と ul の入れ子問題をうまく処理できません。 。常にインデントされます

HTML コード


<style>
#category{ font-size:12px;}
#category label{ font-weight:bold; height:30px;}
#category ul{ list-style-type:none;}
#category > ul,#category li ul{ margin:0;......
画像とタイトルは 1 行にする必要はありません。 2行目を中心に〜どうやってやるの？

HTML コード


<style>
#category{ font-size:12px;}
#category label{ font-weight:bold height:30px;}
#category ul{ リスト-style-type:none;}
#category > ul,#category li ul{ margin:0;......
画像とタイトルは同じ行に配置する必要はありませんが、2 番目の行の中央に配置する必要があります。ライン〜どうやってやるの？

1: 次のように、ラベルをブロックレベルの要素として表示します。
#category label{ font-weight:bold; height:30px; line-height:30px; display:block}

2: 画像に次のスタイルを追加します
li img{ display:block; }

ありがとう〜・わかりました