【问题标题】:Unordered List with checkmarks list-style-positions-outside Text aligned on the left vertically带有复选标记的无序列表 list-style-positions-outside 文本在左侧垂直对齐
【发布时间】:2015-10-26 03:26:18
【问题描述】:

我试图有一个带有复选标记的无序列表,并且我的文本在左侧排列,而不是让我的第二行文本浮动到左侧并位于复选标记下方。

有人知道怎么做吗?

【问题讨论】:

  • preco-do 元素被视为在您的 li 文本的同一行中,因此无法使用 preco-do 元素来实现,是否可以添加 @987654322 @在每个li前面打勾
  • 一种解决方案(虽然不是最好的)是在伪元素的选择器中添加负边距(例如margin-left: -1.2em;)。

标签: html css html-lists


【解决方案1】:

下面的代码可以帮助你理解。 Here's a JSFiddle demo.

li:before
{
    content: '✔';   
    margin-left: -1em;
    margin-right: .100em;
}

ul
{
   padding-left: 20px;
   text-indent: 2px;
   list-style: none;
   list-style-position: outside;
}

请参考此链接获取对号:http://amp-what.com/#q=check%20mark

将代码粘贴到li 的内容属性中以获得复选标记。 我希望这能帮到您。请投票。

【讨论】:

  • OK Gourav,您的代码运行完美 :) 感谢您使用复选标记和链接到那个很棒的 amp-what.com 网站。 -- 还要感谢 jasonlyvia 和 sbat --- 希望他们能更清楚地说明如何投票???我在任何地方都找不到任何选项按钮来投票?为什么?我一定没有足够的排名!!!
  • @TonyStates :答案旁边的向上和向下箭头。
  • @TonyStates 嗯好吧,看看你做了什么:)
  • 我更喜欢使用实体转换计算器而不是实际检查 :before 内容。 evotech.net/articles/testjsentities.html
  • 您好 Gourav,我希望您能解释一下您使用的测量值。我想我了解margin-left:-1em,但你如何在ul 元素上获得margin-right:.100emtext-indent:2px
猜你喜欢
  • 2015-12-19
  • 2012-11-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-06-13
  • 1970-01-01
  • 2014-11-17
  • 1970-01-01
相关资源
最近更新 更多