Question

我想让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>

Answer 1

在div类文章列表中将 width 设置为您需要该块的任何宽度。

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

display: inline-flex;

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

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

li内联填充可用宽度

1 个答案: