我正在尝试弯曲包含文本的列表。
我无法有效地找到一种方法来弯曲列表中的项目，例如，我的目标是实现诸如此类的目标。
() Text
() Text
() Text
() Text
() Text
我最初的想法是在div内创建ul，然后为每个li每个leftCSS属性来对齐所有内容，例如left: 80，然后left:60，left:40然后left: 60，left: 80。不幸的是，这不起作用，利润率也没有。
<div class="d-flex h-100 w-25 m-0 p-0 position-fixed align-items-center justify-content-center" style="background: transparent; left: 0;">
<ul>
<li>
<svg height="100" width="100" style="left: 20"> <-- Does not allow me to left:20 for some reason, but can allow me to left: 0 above?
<circle cx="50" cy="50" r="40" stroke-width="3" fill="red"> </circle>
</svg>
</li>
....
</ul>
</div>
我想创建每个列表项，其中包含一个旁边带有文本的圆圈，以便仅当单击与文本关联的圆圈时，文本才可见。
创建此曲线的最佳方法是什么？为了将来的设计参考，我希望圆圈在单击一个圆圈而其他圆圈褪色时更改大小(此处不考虑回答，仅供设计参考(
最终，如果它到达，cssshape-inside属性应该解决这个问题。(见 https://drafts.csswg.org/css-shapes-2/(同时，这里有一个建议的解决方案。我正在使用 html 来创建 li 类，并使用 css 来设置每个项目符号的左边距属性的样式。然后，我可以使用类在一个方向上模拟一条柔和的曲线，并在另一侧重复每个类来模拟曲线的另一半。您可以根据需要调整左边距值。您提到边距对您不起作用，但我想知道这是否是因为我没有看到您的代码的某些方面，因为我的版本有效。
<!DOCTYPE html>
<html>
<head>
<style>
.a {
margin-left: 30px;
}
.b {
margin-left: 23px;
}
.c {
margin-left: 18px;
}
.d {
margin-left: 16px;
}
</style>
</head>
<body>
<ul>
<li class="a">Coffee</li>
<li class="b">Tea</li>
<li class="c">Coca Cola</li>
<li class="d">Sprite</li>
<li class="d">Something else</li>
<li class="c">Other text</li>
<li class="b">Espresso</li>
<li class="a">Root beer</li>
</ul>
</body>
</html>
这是一个具有相同 css/html https://jsfiddle.net/L2o8cfv5/的小提琴
要在单击时更改大小，您可以让 jquery 更改每个类的左边距属性和/或更改边距顶部属性以使圆圈看起来变大。