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