0

どのように説明すればよいかわかりませんが、項目1と2の間の領域（スペース）の幅を自動的に広げたいのですが、それがulまたはliであるかどうかはわかりません。

また、アイテム1を子の中心に垂直にします。CSSを処理する方法をたくさん試しましたが、解決策を見つけることができませんでした。助けてアドバイスしてください。

今は

-----                                                     -------
| P |              I want to be like this  ->             |  C  |
-----                                                     -------
     -----                                     -------    -------
     | C |                                     |  P  |    |  C  |
     -----                                     -------    -------
     -----                                                -------
     | C |                                                |  C  |
     -----                                                -------
     -----
     | C |
     -----  
                         the width of P will auto change

CSS

.div {
    border: 1px solid #666;
    overflow: hidden;
    display: table;
    height: 30px;
    width: 100px;
}
ul{
    list-style:none;    
}

HTML

<ul>
  <li>
    <div class="div">Item 1</div>
<ul>
  <li>
    <div class="div">Item 1.1</div>
</li>
<li>
  <div class="div">Item 1.2</div>
</li>
<li>
  <div class="div">Item 1.3</div>
</li>
<li>
  <div class="div">Item 1.4</div>
</li>
</ul>
</li>
<li>
  <div class="div">Item 2</div>
</li>
<li>
  <div class="div">Item 3</div>
</li>
<li>
  <div class="div">Item 4</div>
</li>
</ul>
4

2 に答える 2

1

これを処理する多くの方法。あなたの例では、実際には全体の幅を表現していないので、PとCの両方を一緒にしたいとしましょう。

<div class="containBoth" style="width:500px;">
  <div class="c" style="float:right;width:300px;">
    <ul>
    <li>c</li>
    <li>c</li>
  </ul>
 </div>

<div class="p" style="margin-right:20px">
    P 
</div>
</div><!-- close containBoth-->

もちろん、私はスピードのためにインラインスタイルを使用しました。私が行ったようにクラスを割り当て、実際のcssをシートに入れる必要があります。私はあなたに見せるためにここで両方をしました。何かを右にフロートさせるときは、簡単にするために、それがhtmlドキュメントの最初に来る必要があることを覚えておいてください。それはcontent / div/etcです。

于 2012-12-29T00:03:05.830 に答える
1

フィドルはおおよそのものだと思いました。しかし、これをチェックしてください。http://jsfiddle.net/nQvEW/138/

私が行ったことは、最初のli要素をクラスparentの親要素と見なし、メインページに対してそれらを配置したことです。

.parent {
position:relative;
}

次に、親要素内のulを考慮し、親li（親li要素と子ul要素の両方で構成される）を基準にして配置し、left属性を適切に適用しました。

.parent ul{
position:relative;
left:20%;
}

第三に、親要素に対して絶対になるように、親要素内のdiv要素を配置しました。あなたは少し、最高のパーセンテージを微調整することができます。子要素からのマージンを維持するために親要素を下にシフトする必要があるため、これは実際には重要です。ただし、理想的なケースでは、上位の属性値は50％である必要があります。

.parent .div {
position:absolute;
top:40%;
}

</ p>

于 2012-12-29T02:22:42.557 に答える