li 内联填充可用宽度答案

【问题标题】：li inline fill available widthli 内联填充可用宽度
【发布时间】：2016-11-24 09:33:33
【问题描述】：

我想让 li 填充每一行的可用宽度以使两边对齐。

这是我的 html 和内联 CSS 样式。

有没有 CSS 方法可以实现这个效果？

HTML：

<div class="row tag-cloud-wrap">
    <div class="col-md-12 content-heading"> 
        <a href="#">
            <h3>
                Find more Content by Keywords
            </h3>
        </a>
        <div class="article-list" style="border: none">
            <ul class="list-inline">
                @foreach($videoData->keywords as $videokeyword)
                <li style="background-color: #999;margin-right: -5px;margin-bottom:0;border-left: 1px solid white; border-bottom: 1px solid white; padding: 5px;">
                    <a style="padding: 5px;" href="#">
                        <strong>{{$videokeyword}}</strong>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

对不起，我没有描述清楚。我想要这个效果动态。例如：如果允许 ul 宽度，第一行显示三个 li，最后一个应该自动填充剩余的行空间。如果屏幕尺寸发生变化，一行只能显示两个元素，最后一个元素应该填充剩余空间。我该怎么做？
没有 CSS 无法检测断行上的最后一个元素...您需要 javascript。
如果每个“行”都是一个单独的容器，这是可能的。

标签： html css html-lists

【解决方案1】：

在 div 类 article-list 上将 width 设置为您需要的块的任何宽度。

然后在每个 li 元素上添加：

display: inline-flex;

你可能需要多玩一点才能得到你想要的东西，但这应该能让你开始。

有关 Flex Box 的更多信息，请参阅：http://www.w3schools.com/css/css3_flexbox.asp。

【讨论】：