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

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

Войти через центр авторизации
Похожие вопросы