4

Всем привет.
Помогите разобраться с инлайн-блоками. Нужно сделать расписание в 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>

3
  • 3
    добавьте vertical-align: top;
    – soledar10
    Commented 13 апр. 2016 в 16:10
  • в вашем css есть блок .schedule которого нет в html. если предположить, что он оборачивает всё остальное, то проблема не воспроизводится jsfiddle.net/yn5fy6L7
    – lexxl
    Commented 13 апр. 2016 в 16:23
  • так и есть он просто оборачивает эту конструкцию.
    – Alex
    Commented 13 апр. 2016 в 17:02

1 ответ 1

3

Попробуйте блокам row поставить vertical-align: top;

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.