css 右边距不起作用并福尔斯边界，尽管父级设置为显示伸缩

nhaq1z21 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(123)

我想把评级星级的图片移到右边，但是缩进从块中福尔斯出来。
我尝试将显示Flex设置为父级，但没有帮助（（
我正在尝试移动RatingUserList块

.RatingUser {
  display: flex;
}

.RatingUserList {
  margin-right: 40px;
  list-style-type: none;
  display: flex;
  height: 20px;
}

.RatingCell {
  margin-right: 5px;
}

<div class="NameAndRating">
  <p class="UserName">Юрий Петров</p>
  <!-- имя пользователя в профиле -->
  <div class="RatingUser">
    <ul class="RatingUserList">
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
    </ul>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75731218/margin-right-does-not-work-and-falls-out-of-bounds-although-the-parent-is-set-t

1条答案

按热度按时间

iklwldmw1#

我想这就是你要的。我用HTML星标来使它们可见。你必须用你的图片来替换它们。

/* Added */
.NameAndRating {
  display: flex;
}

.RatingUser {
  margin-left: auto;
}
/* ---------- */

.RatingUserList {
  margin-right: 40px;
  list-style-type: none;
  display: flex;
  height: 20px;
}

.RatingCell {
  margin-right: 5px;
}

<div class="NameAndRating">
  <p class="UserName">Юрий Петров</p>
  <!-- имя пользователя в профиле -->
  <div class="RatingUser">
    <ul class="RatingUserList">
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
    </ul>
  </div>
</div>

赞(0）回复(0）举报 2023-03-20

我来回答

css 右边距不起作用并福尔斯边界，尽管父级设置为显示伸缩

1条答案

相关问题

热门标签

最新问答