动态改变 <li> 宽度以完全适应 <ul>

Question

我正在尝试显示具有这种结构的媒体库的元素：

.mail-attach-list {
    list-style: none;
    padding: 0;
}
.mail-attach-list>li {
    display: inline-block;
    width: 190px;
}
.thumbnail {
    margin-bottom: 2px;
    border-radius: 3px;
    display: block;
    padding: 4px;
    border-color: rgba(0, 0, 0, 0.09);
    background-color: #fff;
    text-decoration: none;
}
.mail-attach-list>li .mail-file-img, .mail-attach-list>li .mail-file-icon {
    height: 120px;
    overflow: hidden;
    text-align: center;
    background-color: #f8f9fa;
}
.thumbnail .caption {
    padding: 9px;
    color: #333;
}

<ul class="mail-attach-list list-ov">
    <li class="item">
        <a href="#" class="thumbnail">
            <div class="mail-file-icon">
                <i class="pli-file-excel"></i>
            </div>
            <div class="caption">
                <p class="text-primary mar-no text-overflow">Icon Example</p>
                <small class="text-muted text-overflow">
                    Added: <time data-toggle="timeago">4 days ago</time>
                </small>
            </div>
        </a>
    </li>
    <li class="item">
        <a href="#" class="thumbnail">
            <div class="mail-file-img">
                <img class="image-responsive" src="/uploads/2017/09/bg-img-7-400x300.jpg" alt="image">
            </div>
            <div class="caption">
                <p class="text-primary mar-no text-overflow">Image example</p>
                <small class="text-muted text-overflow">
                    Added: <time data-toggle="timeago">4 days ago</time>
                </small>
            </div>
        </a>
    </li>
</ul>

为了这个解释，我删除了一些标签属性

这是预览：

所以我想去掉右边的空白，我用的是像素单位 在 li 元素中，因为我无法使其工作。

如何动态更改 li 元素的宽度以完全适合 ul 父级？

Answer 1

您要做的就是在.mail-attached-list>li 上使用基于百分比的width。您需要使用的确切值取决于您要在单行中显示的项目数。

除此之外，您还可以在.mail-attach-list 上使用text-align-last: center，它将<li> 元素的集合居中：

.mail-attach-list {
  list-style: none;
  padding: 0;
  text-align-last: center; /* Center the elements */
}

.mail-attach-list>li {
  display: inline-block;
  width: 49%; /* Dependant on the number of items per row */
}

.thumbnail {
  margin-bottom: 2px;
  border-radius: 3px;
  display: block;
  padding: 4px;
  border-color: rgba(0, 0, 0, 0.09);
  background-color: #fff;
  text-decoration: none;
}

.mail-attach-list>li .mail-file-img,
.mail-attach-list>li .mail-file-icon {
  height: 120px;
  overflow: hidden;
  text-align: center;
  background-color: #f8f9fa;
}

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

<ul class="mail-attach-list list-ov">
  <li class="item">
    <a href="#" class="thumbnail">
      <div class="mail-file-icon">
        <i class="pli-file-excel"></i>
      </div>
      <div class="caption">
        <p class="text-primary mar-no text-overflow">Icon Example</p>
        <small class="text-muted text-overflow">
                    Added: <time data-toggle="timeago">4 days ago</time>
                </small>
      </div>
    </a>
  </li>
  <li class="item">
    <a href="#" class="thumbnail">
      <div class="mail-file-img">
        <img class="image-responsive" src="/uploads/2017/09/bg-img-7-400x300.jpg" alt="image">
      </div>
      <div class="caption">
        <p class="text-primary mar-no text-overflow">Image example</p>
        <small class="text-muted text-overflow">
                    Added: <time data-toggle="timeago">4 days ago</time>
                </small>
      </div>
    </a>
  </li>
</ul>

希望这会有所帮助！ :)