gpt4 book ai didi

html - 如何对齐带元素符号的无序列表中的第二行

转载 作者:行者123 更新时间:2023-11-28 00:35:46 27 4
gpt4 key购买 nike

我的食谱网站上有一个未排序的配料列表。我在列表周围做了一些填充,以便它显示在页面的中央。但是,当我在 iphone 或平板电脑(屏幕较窄的设备)上查看页面时,我的元素符号被推到 2 行并且第二行与第一行不一致。

我相信这是由于我在列表周围使用了填充代码,因此在窄屏幕上,元素符号仍位于页面中央。当元素符号点太长而必须转到 2 行时,第二行将一直推到左侧,而元素符号仍居中。我希望将第二行与第一行对齐(仍以页面为中心)

我曾尝试将它定位在要点“外部”,但是,因为我已经用代码制作了自己的要点,所以这似乎不起作用。

下面的代码是我有的用于此问题的蜂窝设备显示的代码。

    @media only screen and (max-width : 480px)
{ ul[data-rte-list] li>*:first-child::before {
content: "•";
position: outside;
line-height: 1.5em !important;
top: 2px;
padding-right: 10px;
font-size: 22px;
padding-left: 100px;
color: #373737;
opacity: .4;
}

}

这正是页面的样子:

how the page looks

最佳答案

您正在将填充应用于每个 <li> 的::before 选择器元素。从那里删除它并将其添加到 <ul>元素。

@media only screen and (max-width : 480px)
{
ul[data-rte-list] {
padding-left: 100px;
}

ul[data-rte-list] li>*:first-child::before {
content: "•";
position: outside;
line-height: 1.5em !important;
top: 2px;
padding-right: 10px;
font-size: 22px;
color: #373737;
opacity: .4;
}
}

关于html - 如何对齐带元素符号的无序列表中的第二行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56365752/

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