Ul, плавающий над нижней границей родительского div

Неупорядоченный список плавает над нижней границей своего родительского div. Я не понимаю, почему это происходит, и нашел только обходные пути для решения проблемы.

enter image description here

Когда я увеличиваю высоту родительского div (красная рамка), ul останется в том же положении.

.bottom-container .comment-list .comment .buttons {
  width: 100%;
  height: 25px;
  border: 1px solid red;
}

.bottom-container .comment-list .comment .buttons #comment-details {
  float: right;
  display: inline-block;
  list-style-type: none;
  margin-right: 10px;
}

.bottom-container .comment-list .comment .buttons #comment-details a li {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgba(50, 50, 50, 1.0);
  border-right: 2px solid rgba(100, 100, 100, 1.0);
}
<div class="buttons">
  <ul id="comment-details">
    <a id="reply-button">
      <li> Reply <i class="material-icons" style="font-size: 12pt"> reply </i></li>
    </a>
    <a id="upvote">
      <li> 5 <i class="material-icons" style="font-size: 12pt"> arrow_upward </i></li>
    </a>
    <a id="downvote">
      <li> 1 <i class="material-icons" style="font-size: 12pt"> arrow_downward </i></li>
    </a>
  </ul>
</div>

Я хочу, чтобы ul находился прямо посередине и плавал справа от родительского div.

0
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

CSS может быть сложным, но я думаю, это причина того, что отступ для класса .button не имеет верхнего и нижнего набора, поэтому он используется по умолчанию.

Также поля не установлены для верха и низа для ul, поэтому он может отбросить его.

Вы были полностью правы, установка верхнего и нижнего поля на 0 в ul решила проблему. Спасибо!

Chris 13.09.2018 20:30

Другие вопросы по теме