-1

我正在显示来自数据库的电影列表——它们应该是内联显示的，但它们是垂直显示的。我曾尝试对 li 和 inline 使用 inline-block，但没有任何效果。任何帮助表示赞赏。谢谢！ 

.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>s 和inside<p>是<li>块元素。你应该把display:inline那些<div>s 和<p>.

此外，$description变量中作为块级元素的任何 HTML 都会导致相同的行为。

编辑：您的网站上有更大的问题导致问题。

<div id="movienav"></div>你一遍又一遍地重复你的代码，每一个都有一个<ul>和一个<li>项目。首先，您不能拥有多个具有相同唯一 ID 的容器。其次，那些<div>s 是块元素，因此它们不显示内联。

你需要设置你的结构看起来更像这样：

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

不是你拥有它的方式，那么你的风格应该可以正常工作。

于 2013-02-13T16:06:11.773 回答
0

如果你想在一行中显示它们，你可以使用float属性。

li { 
    float: left;
    margin-right: 10px;
}

这会将它们显示在一行中，但不会显示为内联元素（它们仍将是块元素）。

于 2013-02-13T16:12:40.907 回答