<ul>和<ol>显示问题-不同的树状结构
<ul>和<ol>显示问题-不同的树状结构
提问于 2019-06-26 08:14:03
我正在尝试显示一个无序列表，如下所示：
<p style="margin-top:1em; line-height: 1.4;">Dear John,</p>
<p style="margin-top:1em; line-height: 1.4;">Here's the list of items to collect:</p>
<p style="margin-top:1em; line-height: 1.4;"></p>
<ul>
<li>Item 1 - Apples</li>
<li>Item 2 - Bananas</li>
</ul>它看起来像这样：
如果我将其更改为有序列表，它将如下所示：
我不能让无序列表以与有序列表相同的方式缩进。下面是CSS的相关部分：
html, body, h1, h2, h3, h4, h5, h6, p, ul, li{
margin: 0;
padding: 0;
}
body{
font-family: 'Myriad Set', 'Myriad Pro', 'Myriad', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-webkit-font-smoothing: antialiased;
max-width: 775px;
margin: 0 auto;
padding: 1.25em 0 0;
font-size: 12pt;
background-color: #fff;
color: #000;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-26 08:24:44
就像其他答案一样-我假设你想删除ul上的页边距和填充-但重新阅读你的帖子-似乎你希望ul相对于文本的其余部分缩进-我将其缩进1em -但你可以改变这一点。
我还建议使用CSS计数器(它会自动对列表中的项目进行编号，并防止您手动添加"item 1...Left“)-但为了使其与您所拥有的保持一致-删除项目符号并将ul上的item2...etc-left设置为1em。
html, body, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
body{
font-family: 'Myriad Set', 'Myriad Pro', 'Myriad', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-webkit-font-smoothing: antialiased;
max-width: 775px;
margin: 0 auto;
padding: 1.25em 0 0;
font-size: 12pt;
background-color: #fff;
color: #000;
}
ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
p {
margin-top:1em;
margin-bottom:1em;
line-height: 1.4;
}
a {
color: #58aefe;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}<p>Dear John,</p>
<p>Here's the list of items to collect:</p>
<ul>
<li>Item 1 - Apples</li>
<li>Item 2 - Bananas</li>
</ul>
<p>If you have any questions please contact the Warehouse at <a href="#">warehouse@acme.com</a></p>
<p>Thanks</p>
<p>Acme fruit suppliers</p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56763540
复制相关文章
相似问题