列出右对齐段落

Question

对于初学者来说，有很多原因导致我无法更改html代码，因此任何解决方案都必须使用当前的html代码。我想要做的是右对齐段落，但让它们居中，而不是在屏幕的右侧，因为它看起来不太好。

<ul class="ullist">
<li><p>sometext</p></li>
<li><p>somemoretext</p></li>
<li><p>somemoremoretext</p></li>
<li><p>lesstext</p></li>
<li><p>text</p></li>
</ul>

CSS：

 ul.ullist li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0;
    text-align: right;
}

ul.ullist li p {
font-size:2.4em;
color:#000;
font-weight:600;
white-space:nowrap;
display:inline-block;}

Answer 1

您可以在段落中添加 margin-right ：

ul.ullist li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0;
    text-align: right;
}

ul.ullist li p {
    font-size:2.4em;
    color:#000;
    font-weight:600;
    white-space:nowrap;
    display:inline-block;
    margin-right: 10%;
}

<ul class="ullist">
    <li><p>sometext</p></li>
    <li><p>somemoretext</p></li>
    <li><p>somemoremoretext</p></li>
    <li><p>lesstext</p></li>
    <li><p>text</p></li>
</ul>

Answer 2

尝试在ul.ullist上设置一些宽度并在其上设置margin:auto。

ul.ullist{
min-width:200px;
width:300px; /*Change the width to suit your needs*/
margin:auto;
}
ul.ullist li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0;
    text-align: right;
}

ul.ullist li p {
font-size:2.4em;
color:#000;
font-weight:600;
white-space:nowrap;
display:inline-block;}

<ul class="ullist">
<li><p>sometext</p></li>
<li><p>somemoretext</p></li>
<li><p>somemoremoretext</p></li>
<li><p>lesstext</p></li>
<li><p>text</p></li>
</ul>