在使用CSS重置后,我的ul个列表出现了一些问题.

li中的文本很长并换到第二行时,文本从项目符号下面开始.我希望它以与项目符号右侧的文本相同的页边距/填充开始.

很难解释,但如果你看一下这个例子-图像.左图是今天的名单."莫塔·瓦塞尔[.]"从子弹下面开始,但我想让它看右边的照片.

我如何使用CSS来实现这一点?我想我忽略了一些非常简单的事情,但我想不出是什么.谷歌搜索也没有返回任何有用的信息.

enter image description here

推荐答案

li标记有一个名为list-style-position的属性.这使你的子弹在名单之内或之外.默认设置为inside.这会让你的文字环绕它.如果将其设置为outsideli个标签的文本将对齐.

这样做的缺点是,您的项目符号不会与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

  • 更改了代码块以提供just个解决方案
  • 将缩进单位更改为em
  • 每个属性都应用于ul元素
  • 好评:)

Css相关问答推荐

如何以Angular 调整下拉控件的高度

我应该在哪里放置expo /Reaction本地项目的CSS重置文件?

当具有外部高度的网格项溢出时,为什么溢出滚动端口填充不应用于网格容器?

如何在css中创建文件div效果

使用SVG以竖排书写模式创建渐变文本时,文本显示异常

CSS 中的 :not(style) ~ :not(style) 是什么?

解释 "document.styleSheets[0].cssRules[0].style;"

如何使用来自单独模块的代码将自定义标头插入到使用 DT Shiny 呈现的表中?

做一个像CodeSandbox的console那样的可拖拽的split panel

Icomoon:如何避免重复索引(具有相同内容 ID 的不同图标)?

如何为使用jsTreeR拖入层次 struct node 的元素添加顺序编号?

从 Angular SCSS 生成 CSS?

有条件地覆盖 CSS 中的 AntD Select 样式

使用 CSS3 生成重复的六边形图案

如何在需要时通过 HTTPS 包含 CSS 和 JS 文件?

Highcharts 图表选项 backgroundColor:'transparent' 在 IE 8 上显示黑色

通过javascript删除或禁用浏览器的焦点边框

矩形图像的 CSS 圆形裁剪

可变高度的 CSS 浮动 div

如何创建一个带点的
标签?