Всем привет.
Помогите разобраться с инлайн-блоками. Нужно сделать расписание в 2 колонки внутри родительского контейнера. Казалось бы тривиальная задача, но правый список непонятно из-за чего съезжает на строку ниже первого. Никаких маргинов и паддингов нет, есть только text-align: center
во враппере. Если не получится реализовать так, буду делать через display: table
, но все же хочется понять в чем проблема, а не забить на неё.
Заранее спасибо!
.schedule {
background-image: url("img/schedule.png");
background-repeat: no-repeat;
background-position: center top;
width: 1055px;
height: 558px;
margin-top: 25px;
}
.schedule ul {
list-style: none;
}
.date {
font-family: 'open_sansbold';
}
.schedule .row-1 {
display: inline-block;
}
.schedule .row-2 {
display: inline-block;
}
.row {
width: 390px;
height: 390px;
}
.schedule-header {
font-family: 'open_sansbold';
color: #12305b;
width: 528px;
text-transform: uppercase;
margin: 0 auto;
padding-top: 1.9em;
}
<div class="schedule-header">расписание уроков</div>
<ul class="row row-1">
<li><span class="date">28.03.2016</span>
<br>Работа над произношением</li>
<li><span class="date">04.04.2016</span>
<br>разбираем правила чтения и учимся правильно читать</li>
<li><span class="date">11.04.2016</span>
<br>Произношение слов в беглой речи</li>
<li><span class="date">18.04.2016</span>
<br>Схема построения английского предложения</li>
</ul>
<ul class="row row-2">
<li><span class="date">25.04.2016</span>
<br>Учимся запоминать новые слова</li>
<li><span class="date">03.05.2016</span>
<br>Преодолеваем языковой барьер</li>
<li><span class="date">10.05.2016</span>
<br>Урок с носителем языка</li>
<li><span class="date">16.05.2016</span>
<br>Урок с носителем языка</li>
</ul>
.schedule
которого нет в html. если предположить, что он оборачивает всё остальное, то проблема не воспроизводится jsfiddle.net/yn5fy6L7