-1

データベースから映画のリストを表示しています。インラインで表示されるはずですが、垂直に表示されています。インラインと同様にliにもインラインブロックを使用してみましたが、何も機能していません。どんな助けでも大歓迎です。ありがとう！ 

.movienav {
    height: 500px;
    width:75%; 
    float:left;
    margin-top:25px; 
    clear:left;
    padding-bottom: 45px;
}

.movienav li {
    width: 340px;
    height: 450px;
    float: left;
    margin-right: 10px;
    position: relative;
    display:inline;
    list-style:none;

}

.movienav li div {
    backface-visibility:hidden;
    width: 340px;
    height: 450px;
    overflow: hidden;
    background: #161616;
    position: absolute;
    top: 0;
    left: 0;
    display:inline;

}

.movienav li div.back {
    backface-visibility:hidden;
    left: -999em;
    padding-bottom: 15px;  
    background-color:#161616; /*max-height:450px; overflow:auto;*/
    margin-top: 0;
    display:inline;

}

<div class="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">


<p><?php echo $description; ?></p>
</div>
</li>
</ul>
</div>
4

2 に答える 2

3

内のと<div>はブロック要素です。これらの およびに配置する必要があります。<p><li>display:inline<div><p>

$descriptionまた、ブロック レベルの要素である変数内の HTML は、同じ動作を引き起こします。

編集:あなたのサイトには、問題を引き起こしているはるかに大きな問題があります。

<div id="movienav"></div>コードを何度も繰り返しており、それぞれに<ul>1 つの<li>アイテムが含まれています。まず、同じ一意の ID を持つコンテナーを複数持つことはできません。次に、これら<div>の s はブロック要素であるため、インラインで表示されない理由です。

次のように構造を設定する必要があります。

<div id="movienav">
  <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
  </ul>
</div>

あなたが持っている方法ではなく、あなたのスタイルはうまくいくはずです.

于 2013-02-13T16:06:11.773 に答える