CSS水平对齐段落

Question

我想在水平对齐的某个类下面有几个段落。基本上，我希望每个段落都有自己的列。

我使用了float: right;。这使得它们成为列，但随后它将它们与网页的其余部分一起格式化。

有关创建列的不同方法或使用float格式化的任何提示都将不胜感激。

Answer 1

您可以随时使用CSS列。

div
{
   -webkit-column-count:3; /* Chrome, Safari, Opera */
   -moz-column-count:3; /* Firefox */
   column-count:3;
   -webkit-column-gap:40px; /* Chrome, Safari, Opera */
   -moz-column-gap:40px; /* Firefox */
   column-gap:40px;
}

来自W3schools。

或者，如果您总是可以控制文本，则可以使用列表项。

HTML

<ul>
    <li>paragraph</li>
    <li>paragraph</li>
    <li class="last">paragraph</li>
</ul>

CSS

ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    float: left;
    width: 30%
    margin-right: 5%;
}

ul li.right {
    margin-right: 0;
}