gpt4 book ai didi

html - 内容溢出时左对齐

转载 作者:太空宇宙 更新时间:2023-11-03 20:07:27 25 4
gpt4 key购买 nike

我试图让这些元素符号列表都从中心开始。我注意到,当文本的长度超过浏览器窗口的宽度时,元素符号点会对齐到页面的左侧。为什么会这样,我怎样才能让它居中对齐?这是一个溢出问题吗?我不知道如何解决这个问题。

感谢您的帮助,谢谢。

.standard-list-wrap{
padding-top: 25px;
display: flex;
justify-content: center;
align-items: center;
}

ul.standard-list{
padding:0px 0 50px 00000;
margin:0;
text-align:left;
color:#000;
font-weight:100;
font-family:Montserrat, Helvetica, Arial, sans-serif;
font-size:20px;
-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
line-height:28px;
}

ul.standard-list li{
list-style-type: none;
line-height:28px;
}
ul.standard-list li:before{
/* Unicode bullet symbol */
content: '\2022';
/* Bullet color */
color: #f0f;
padding-right: 10px;
}
<div class="standard-list-wrap">

<ul class="standard-list">
<li>shorter text is no problem</li>
<li>shorter text is no problem</li>
</ul>

</div>



<div class="standard-list-wrap">

<ul class="standard-list">
<li>but when the text gets too long the problem occurs because the div is no longer centralised and list floats to the left of the page - i want the bullet points to be centralised like the above</li>
</ul>

</div>

最佳答案

当文本内容太长时,元素将占用 100% 的宽度

也许你可以为你的列表项设置一个最大宽度

.standard-list-wrap {
padding-top: 25px;
display: flex;
justify-content: center;
align-items: center;
}

ul.standard-list {
padding: 0px 0 50px 00000;
margin: 0;
text-align: left;
color: #000;
font-weight: 100;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 20px;
-webkit-font-smoothing: antialiased;
/* subtley makes fonts smoother */
line-height: 28px;
}

ul.standard-list li {
list-style-type: none;
line-height: 28px;
max-width: 400px;
margin: auto;
}

ul.standard-list li:before {
/* Unicode bullet symbol */
content: '\2022';
/* Bullet color */
color: #f0f;
padding-right: 10px;
}
<div class="standard-list-wrap">

<ul class="standard-list">
<li>shorter text is no problem</li>
<li>shorter text is no problem</li>
</ul>

</div>



<div class="standard-list-wrap">

<ul class="standard-list">
<li>but when the text gets too long the problem occurs because the div is no longer centralised and list floats to the left of the page - i want the bullet points to be centralised like the above</li>
</ul>

</div>

:

ul.standard-list li{
list-style-type: none;
line-height:28px;
max-width: 400px;
margin: auto;
}

关于html - 内容溢出时左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43694568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com