html - 向元素符号点添加缩进

标签 html css twitter-bootstrap html-lists

我正在寻找这样的效果:

enter image description here

但是我现在的效果是:

enter image description here

我需要在我的 css 中添加什么才能使缩进达到我想要的效果,所以任何要点的第二行都缩进了?目前 HTML 设置只是 <ul><li></li><ul> CSS 是:

li {
    margin-left: 10px;
    list-style-position: inside;
}

并且还通过以下方式整合了 Bootstrap:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

所有这些元素符号列表都在 <section> 内带有样式:

section {
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1px;
    color: #666;
}

最佳答案

默认情况下,使用 list-style-position: inside; 会得到想要的效果。

<ul>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio delectus magnam nobis, nulla dolore accusamus.</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio delectus magnam nobis, nulla dolore accusamus.</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio delectus magnam nobis, nulla dolore accusamus.</li>
 <ul>

关于html - 向元素符号点添加缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42531020/

相关文章:

javascript - 用于链接用于显示存储的推文的 php 代码的 HTML 代码不起作用

html - Next.js "Image"与普通 "img"标签中的图像质量较低

html - 重叠透明背景

html - 如何在 skel.js HTML 中占用多行?

css - 如果通过移动浏览器访问,如何更改网站的 CSS

php - 500(服务不可用(带有消息))

javascript - 查找具有相同类且具有空值的下一个元素

javascript - jquery,当我点击菜单时如何避免隐藏菜单

javascript - 显示多个 JavaScript 倒计时

html - CSS3 动画不适用于 chrome