html - 居中列出的右对齐段落

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

您可以在段落中添加边距：

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>