css 如何将列表项与上面的文本对齐?[duplicate]

k10s72fa  于 2022-11-26  发布在  其他
关注(0)|答案(3)|浏览(153)

此问题在此处已有答案

How to make a bullet list align with text in css?(4个答案)
How do I align the list items in an with my ?(6个答案)
How to indent a paragraph so that it aligns horizontally with above list items(3个答案)
Aligning list items with title(2个答案)
2天前关闭。
使用无效的HTML我得到了我想要的外观,但使用有效的HTML我没有。是否有CSS允许我配置或模拟正在做的事情?
我希望它看起来在左边,有效的HTML在右边。
无效的HTML:
第一个
有效HTML:
第一次

rbpvctlc

rbpvctlc1#

只是添加一些样式以重置默认样式。
第一个

zaq34kh6

zaq34kh62#

应使用开发工具检查用户代理值
例如,TD下的第一个元素是ul或figure。2作为Chrome中的标准:

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

因此,如果您希望在布局中保留图形,请在样式中添加图形,以覆盖破坏布局属性,并添加所需属性

zbdgwd5y

zbdgwd5y3#

将UL的paddingmargin设置为0。这将删除空格。

<FIGURE>
      <FIGCAPTION><SPAN style="font-weight: bold; text-decoration: underline; color: lemonchiffon">Color Code Guide</SPAN></FIGCAPTION>
      <UL style="margin: 0;padding: 0">
        <LI><SPAN style="color: DarkCyan">comment</SPAN></LI>
        <LI><SPAN style="color: Coral">processor directive</SPAN></LI>
        <LI><SPAN style="color: HotPink">#ifndef name</SPAN></LI>
        <LI><SPAN style="color: PaleTurquoise">library include</SPAN></LI>
        <LI><SPAN style="color: DarkSalmon">user-defined include</SPAN></LI>
        <LI><SPAN style="color: Gold">library function</SPAN></LI>
        <LI><SPAN style="color: DarkKhaki">initializer function</SPAN></LI>
        <LI>user-defined function</LI>
        <LI><SPAN style="color: DodgerBlue">keyword</SPAN></LI>
        <LI><SPAN style="color: Red">important symbol</SPAN></LI>
      </UL>
    </FIGURE>

相关问题