li不显示内联 [英] li not displaying inline

问题描述

我正在显示一个来自数据库的电影列表 - 它们应该在线显示，但它们正在垂直显示。我试过使用inline-block为li和inline，但没有什么工作。任何帮助是赞赏。谢谢！

  .movi​​enav {
 height：500px; 
 width：75％; 
 float：left; 
 margin-top：25px; 
 clear：left; 
 padding-bottom：45px; 
} 
 
 .movi​​enav li {
 width：340px; 
 height：450px; 
 float：left; 
 margin-right：10px; 
 position：relative; 
 display：inline; 
 list-style：none; 
 
} 
 
 .movi​​enav li div {
 backface-visibility：hidden; 
 width：340px; 
 height：450px; 
 overflow：hidden; 
 background：＃161616; 
 position：absolute; 
 top：0; 
 left：0; 
 display：inline; 
 
} 
 
 .movi​​enav 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 =340height =450class =dvdcover/>< / div> 
< div class =back> 
 
 
< p><？php echo $ description; ？>< / p> 
< / div> 
< / li> 
< / ul> 
< / div> 
  

解决方案

< div& 以及< li> 中的< p> 是块元素。您应该在< div> s和< p>上放置 display：inline $

此外， $ description 变量中的任何HTML

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

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

设置您的结构看起来更像这样：

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

不是你的方式，那么你的风格应该很好。

I am displaying a list of movies from a database- they are supposed to be displaying inline, but they are displaying vertically instead. I have tried using inline-block for li as well as inline, but nothing is working. Any help is appreciated. Thanks!

.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>

解决方案

The <div>s and the <p> within the <li> are block elements. You should place display:inline on those <div>s and <p>.

Also, any HTML in the $description variable that are block-level elements are going to cause the same behavior.

EDIT: You have much bigger problems on your site that are causing the issue.

You are repeating your <div id="movienav"></div> code over and over again, each with a <ul> and one <li> item in it. Firstly, you cannot have more than on container with the same, unique ID on it. Second, those <div>s are block elements, thus why they are not displaying inline.

You need to set up your structure to look more like this:

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

Not the way you have it, then your style should work fine.

这篇关于li不显示内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！