css 如何垂直对齐列表项标记

gcuhipw9 于 2022-12-20 发布在其他

关注(0)|答案(3)|浏览(201)

我正在尝试用下面的CSS增加列表项标记的大小：

li::marker {
  color: grey;
  font-size: 3.5rem;
}

<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

调整大小的效果很好，但是标记不再与列表项内容垂直对齐。
我尝试使用vertical-align，但似乎无法获得所需的结果：
一个二个一个一个
我试过在标记上使用position: absolute来移动它，我也试过transform: translateY(x);，但是由于某种原因，我根本不能让它们移动标记......另外，我不想每次改变列表项或标记的字体大小时都要回去摆弄x。
下面是我的一个尝试作为一个例子：

li::marker {
  color: grey;
  font-size: 3.5rem;
  transform: translateY(1000rem);
}

<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

我见过很多类似的问题，但似乎没有一个能提供这样的解决方案：

不引入额外的HTML标记
不引入在列表项（或标记）的字体大小更改时需要更改的自定义值。
不需要JavaScript

话虽如此，如果我错过了什么，请随时为我指出正确的方向，我会自己将此标记为重复。

css

来源：https://stackoverflow.com/questions/69874236/how-can-i-vertically-align-a-list-item-marker

3条答案

按热度按时间

xbp102n01#

坦率地说，我不会使用marker，因为您的样式选项被有意地限制了。
只有某些CSS属性可以在将：：marker用作选择器的规则中使用：
所有字体属性
空格属性、颜色属性、文本合并属性、双向字符属性和方向属性&内容属性

li {
  display: flex;
  align-items: center;
  padding: .5rem;
  border: 1px solid red;
}

li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: grey;
  margin-right: .5rem;
}

<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

赞(0）回复(0）举报 2022-12-20

c90pui9n2#

before伪元素解决方案可以提供您想要的（就我个人而言，我会使用它），但如果它对其他出于某种原因而被限制使用标记的人有用，可以将内容设置为Unicode大圆，如本代码片段中所示，并对其进行着色。

li::marker {
  content: '\2B24 ';
  color: gray;
}

<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

注：在Windows 10上的Chrome/Edge和Firefox上测试正常。但是，iPad IOS（14）上的Safari显示了一个较小的圆圈。

赞(0）回复(0）举报 2022-12-20

wfsdck303#

在css：之前添加：：

content: "";
display: inline-block;
vertical-align: middle;

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何垂直对齐列表项标记

3条答案

相关问题

热门标签

最新问答