里不显示内联[关闭](li not displaying inline [closed])

我从他们应该被显示内嵌一个数据库 - 播放电影的名单，但他们显示垂直代替。 我一直在使用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>

Answer 1:

所述<div> S和<p>的内<li>是块元素。 您应该将display:inline那些<div> S和<p>

此外，在任何HTML $description变量是块级元素都将导致相同的行为。

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

你是重复你的<div id="movienav"></div>一遍又一遍代码，每一个<ul>和一个<li>在它的项目。 首先，你不能有比与它相同的，唯一的ID容器更容易。 第二，这些<div> s为块的元素，因此他们为什么不显示内联。

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

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

不是你拥有了它的方式，那么你的风格应该做工精细。

Answer 2:

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

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

这将显示它们在一行而不是作为内联元素（它们将仍然是块元素）。

文章来源: li not displaying inline [closed]