Я показываю список фильмов из базы данных – они должны отображаться в строке, но они отображаются вертикально. Я попытался использовать встроенный блок для 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> <div> s и <p> внутри <li> являются блочными элементами. Вы должны поместить display:inline на те <div> s и <p> .
Кроме того, любой HTML в переменной $description являющейся блочными элементами, будет вызывать одинаковое поведение.
РЕДАКТИРОВАТЬ: у вас на вашем сайте гораздо большие проблемы, которые вызывают проблему.
Вы повторяете свой код <div id="movienav"></div> снова и снова, каждый с элементом <ul> и одним <li> . Во-первых, вы не можете иметь больше, чем на контейнере с тем же уникальным идентификатором. Во-вторых, те <div> s являются блочными элементами, поэтому они не отображаются в строке.
Вам нужно настроить структуру, чтобы она выглядела следующим образом:
<div id="movienav"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div>
Не так, как у вас есть, тогда ваш стиль должен работать нормально.
Если вы хотите отобразить их в одной строке, вы можете использовать свойство float .
li { float: left; margin-right: 10px; }
Это отобразит их в одной строке, но не как встроенные элементы (они все равно будут элементами блока).