@LevG0r

Почему наезжают друг на друга блоки div и ul?

Доброго времени. Делаю html- шаблон для письма столкнулся с проблемой -- блок div наезжает на ul. Как это исправить?

<!DOCTYPE html>
<HTML lang="ru">
<head></head>
<meta charset="UTF-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />

<style type = "text/css">
.container {
  position: relative;
  text-align: center;   
  height: 30px;
}

.centered {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.lower {
    position: relative;
    height: 30px;
}
</style>


<body>
    <title>Document</title>
    <div class="container">

        <div class="lower">Приглашение на бета-тест!</div>
        <div class="lower">******************
        </div>
        <div class="lower">******************:</div>
        <div class="lower">
            <ul>
            <li>******************</li>
            <li>******************</li>
            <li>******************</li>
            <li>******************</li>
            <li>******************</li>
            <li>******************</li>
          </ul>
        </div>
        <div class="lower">******************</div>
        <div class="lower">******************</div>


    </div>
      

</body>

</HTML>
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
FeST1VaL
@FeST1VaL
Тихий
У вас стоит у класса .lower высота 30px. UL обернули этим классом, значит высота всего блока 30px. То что не вместилось можно условно скрыть или же сделать скролл overflow: auto; но по факту лучше никогда не ограничивать высоту, только если вам надо сделать скролл блока условно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы