在使用CSS重置后,我的ul
个列表出现了一些问题.
当li
中的文本很长并换到第二行时,文本从项目符号下面开始.我希望它以与项目符号右侧的文本相同的页边距/填充开始.
很难解释,但如果你看一下这个例子-图像.左图是今天的名单."莫塔·瓦塞尔[.]"从子弹下面开始,但我想让它看右边的照片.
我如何使用CSS来实现这一点?我想我忽略了一些非常简单的事情,但我想不出是什么.谷歌搜索也没有返回任何有用的信息.
在使用CSS重置后,我的ul
个列表出现了一些问题.
当li
中的文本很长并换到第二行时,文本从项目符号下面开始.我希望它以与项目符号右侧的文本相同的页边距/填充开始.
很难解释,但如果你看一下这个例子-图像.左图是今天的名单."莫塔·瓦塞尔[.]"从子弹下面开始,但我想让它看右边的照片.
我如何使用CSS来实现这一点?我想我忽略了一些非常简单的事情,但我想不出是什么.谷歌搜索也没有返回任何有用的信息.
li
标记有一个名为list-style-position
的属性.这使你的子弹在名单之内或之外.默认设置为inside
.这会让你的文字环绕它.如果将其设置为outside
,li
个标签的文本将对齐.
这样做的缺点是,您的项目符号不会与ul
之外的文本对齐.如果要将其与其他文本对齐,可以使用边距.
ul li {
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the list’s container
*/
list-style-position: outside;
/*
* Because the bullet is outside of the list’s
* container, indent the list entirely
*/
margin-left: 1em;
}
Edit 15th of March, 2014
em
ul
元素