jquery - 动态改变 宽度以完全适应

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>

I delete some tag attributes for this explanation

这是预览:

So I want to remove the white space on the right, I'm using pixel unit in li elements, because I have not been able to make it works.

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

Answer 1

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

除此之外，您还可以使用 text-align-last: center在 .mail-attach-list ，它将以 <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>

希望对您有所帮助! :)