Question

我正在尝试使用以下结构显示媒体库的元素：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我为此解释删除了一些标记属性

以下是预览：

所以我想删除右侧的空白区域，我使用的是像素单元在li元素中，因为我无法使它工作。

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

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>

{{1}}

希望这有帮助！：）

动态更改<li>宽度以完全适合<ul>

1 个答案: