主页 / 问题 / 707552
Accepted
Nikolay
Asked:2020-08-18 17:48:45 +0000 UTC2020-08-18 17:48:45 +0000 UTC

组成一个多行缩进列表

  • 772

这是html：

.search__name {
  color: #fff;
  display: block;
  width: 20%;
  padding: 0.3em 0;
  background-color: seagreen;
  margin-bottom: 10px;
}
.search__list {
  display: flex;
  flex-wrap: wrap;
  border: 1px #00f solid;
  padding-left: 0;
  padding: 10px;
}
<ul class="search__list">
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
</ul>

如何设置元素之间的填充，使它们等于框架的填充？现在底部框架的填充被添加到元素的填充中。如果我margin在元素的右边做，那么极端元素会向下移动，因为宽度设置为1/5从块的宽度开始

html

1 个回答

  1. Best Answer

    有可能是这样的：

    .search__name {
  color: #fff;
  width: calc(20% - 10px);
  padding: 0.3em 0;
  background-color: seagreen;
  margin: 5px;
}
.search__list {
  display: flex;
  flex-wrap: wrap;
  border: 1px #00f solid;
  padding: 5px;
}
    <ul class="search__list">
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
</ul>

    • 2

相关问题