1

私はCSSを初めて使用し、IE8のリストでこの問題に遭遇しています。left と right という 2 つの div を持ついくつかの li 要素を持つ順序付けられていないリストを作成しています。

HTML コード -

    <ul>
        <li>
             <div class="left">
                 <p>ONE</p>
             </div>
             <div class="right">
                 <p>TWO</p>
             </div>
        </li>
        <li>
             <div class="left">
                 <p>THREE</p>
             </div>
             <div class="right">
                 <p>FOUR</p>
             </div>
        </li> 
   </ul>

基本的に、2 つの列を持つリストを作成したいと考えています。私のCSS -

    ul {
       list-style-type: none;
       padding: 0px;
       margin: 0px;
   }

    ul li {
      height: 40px;
      width: 800px;
      border: 1px solid;
   }



ul li div.left, div.right {
      display: inline-block;
      *display: inline;
      zoom: 1;
   }

上記の CSS と html を使用して、高さ 40px の 2 つの列を持つリストを取得します。firefox と chrome では思い通りに表示されますが、IE では話は別です。

IE でも同じリストが表示されますが、唯一の問題は間隔です。IE では、左と右の div は親の li の上部に配置されますが、Chrome と Firefox では、それらの要素は私が望む中央に配置されます。

IEでこれを実現するにはどうすればよいですか? IE では、私の div は li 要素の上部にしがみつき、間にパディングはありません。CSS に他に何か追加する必要がありますか? 誰かが助けることができれば、それは素晴らしいことです。

ありがとう。

4

1 に答える 1

0

ボックスを浮かせて、li に一致する高さを与えることもできます。インライン ブロックは、すべてのブラウザー/バージョンで期待どおりに機能しません。

ul li div.left,
ul li div.right {
    float: left;
    height: 40px;
    width: 400px;
}
于 2012-09-20T08:37:20.677 に答える