如何在 <li> 元素上对齐文本

问题描述 投票：0回答：1

我正在尝试弄清楚如何使无序或有序列表元素在文本的第一个字母下换行并对齐，就像当文本换行时，文本不会显示在列表上的项目符号或数字下。

这是问题的截图。您可以看到文本换行并且位于项目符号下方：

screebshot

因为我使用的是flex，所以我认为这是我需要添加到CSS文件中的

<ul>
或
<li>
标签中的东西，但在这里和周围搜索后我找不到原因或解决方案。奇怪的是，当我删除 Flex 时，这种情况仍然会发生（在 Safari 和 Chrome 中），所以现在我想知道是否在 CSS 文件中添加了任何内容导致了这种情况。

我在这方面是一个非常初学者，所以我已经没有办法尝试找出可能导致此问题的原因。

这是CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, footer, header, nav, section {
    display: block;    
}

html {
    width:100%;
}

body {
    padding: 1rem 1rem 1rem 1rem;
    font-family: sans-serif;
    font-size: 1.3rem;
    -webkit-font-smoothing: antialiased;
}

header {
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    justify-content: center;
    align-items: baseline;
    font-size: 1.5rem;
    font-weight: 600;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;    
    margin: auto; 
    margin-top: 2rem;
    margin-bottom: 5rem;
    max-width: 600px;
}

p {
    margin-top: 1rem;
    line-height: 1.5;
}

h1 {
    font-size: 2.3rem;
}

li {
    list-style-position: inside;
    margin-top: 0.5rem;
    line-height: 1.25;
}

这是它的 html 文件：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='style.css'>    
    <title>Some title</title>    
</head>
<body>
    <header>
            <h1>Hello World</h1>        
    </header>
    <main>
        <h1>Hi there</h1>        
        <p>
            This is a list:
        </p>
        <p>
            <ul>
                <li>The first item that is rather short</li>
                <li>The second item, which is, in this case, longer and I hope it will wrap to proove the point</li>
                <li>The third item, which is, in this case, also longer and I hope it will wrap to proove the point</li>
            </ul>
        </p>
        <p>
            Done.
        </p>
</body>
</html>

如何“正确”制作此包装？

谢谢您的帮助

css flexbox
1个回答
0
投票

您可以使用 

psuedo elements
元素上的 
li
进行一些调整并添加自定义项目符号点，而不是默认项目符号点。

您可以使用 

list-style: none;
删除默认值。然后您可以调整 
padding-left
 上的
li

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, footer, header, nav, section {
    display: block;    
}

html {
    width:100%;
}

body {
    padding: 1rem 1rem 1rem 1rem;
    font-family: sans-serif;
    font-size: 1.3rem;
    -webkit-font-smoothing: antialiased;
}

header {
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    justify-content: center;
    align-items: baseline;
    font-size: 1.5rem;
    font-weight: 600;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;    
    margin: auto; 
    margin-top: 2rem;
    margin-bottom: 5rem;
    max-width: 600px;
}

p {
    margin-top: 1rem;
    line-height: 1.5;
}

h1 {
    font-size: 2.3rem;
}

ul {
  list-style: none; /* remove default bullet point */
  padding: 0; 
}

ul li {
  position: relative;
  padding-left: 1em; /* adjust how far the text is from the bullet point */
}

/* Add custom bullet point */
ul li::before {
  content: "•"; 
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1em; 
  line-height: 1; 
}
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='style.css'>    
    <title>Some title</title>    
</head>
<body>
    <header>
            <h1>Hello World</h1>        
    </header>
    <main>
        <h1>Hi there</h1>        
        <p>
            This is a list:
        </p>
        <p>
            <ul>
                <li>The first item that is rather short</li>
                <li>The second item, which is, in this case, longer and I hope it will wrap to proove the point</li>
                <li>The third item, which is, in this case, also longer and I hope it will wrap to proove the point</li>
            </ul>
        </p>
        <p>
            Done.
        </p>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.