ul, плавающий над нижней границей родительского элемента - PullRequest
Новая
       10

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

0 голосов
/ 13 сентября 2018

Неупорядоченный список перемещается за нижнюю границу родительского элемента 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.

1 Ответ

0 голосов
/ 13 сентября 2018

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

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

...