作者：丘圆圆611 | 来源：互联网 | 2023-09-23 10:17
请参阅JSFiddle。
这是一种自适应设计，在代码中带有“ vw”参数。我希望 Text_1 ， Text_2 和 Text_3 水平对齐，这意味着当我更改浏览器的窗口大小时，从左侧到左侧的距离这三个词的文字开头屏幕是相同的。使用当前代码，我将它们对齐（通过“ margin”属性），但是一旦浏览器的窗口大小发生变化，Text_2和Text_3就会相对于Text_1（当窗口大小减小时向右移动）移动到当它增加时离开）。代码中有什么问题吗？
.meanings_and_examples {
display: flex;
flex-direction: column;
}
.meaning {
font-family: Tahoma,Geneva,sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0,0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}
ol.circle {
list-style-type: none;
}
li {
line-height: calc(1.1em + 1.5vw);
}
ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 1.3em;
}
ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.2em + 1.5vw);
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0,0.2);
margin: 0% 3.5% 0% -2.4em;
}
ul {
list-style-type: none;
}
.example {
width: auto;
text-align: left;
font-weight: 400;
}
.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
我不确定将ul插入ol有什么意义。但是我认为，如果不是强制性的，则应该分开使用它们，因为您从我所看到的中枚举了相同类型的元素。
然后，您的边距存在多个问题：您的conter有width: calc(1.2em + 1.5vw);但您的边距为margin: 0% 3.5% 0% -2.4em;。
我猜想这是通过尝试不同的值来完成的。
但是您的超级女巫有width: calc(1.2em + 1.5vw);正在将第一个元素推出列表。
因此，如果您要对齐列表项，则页边距应考虑。因此，您的柜台的边距应为margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);
我做了一个可行的示例here。我不确定您是否确实要这样，但是您可以从这里开始。
但是我要问：
您是否真的需要一个或一个，或者只是使用它们，以便可以在某些元素之前添加计数器？因为最好只使用一个类（用于计数器），并对所有元素使用一个单行列表。
,
好的，您有很多事情要做，对于您的下一个问题，我将剔除该示例不需要的任何代码，所有样式等。
接下来，您一起使用了太多的动态宽度，并且正如Paulie_D所说，除了 li 标签之外，您不能在 ul 标签或 ol中放置除 li 标签之外的任何内容。 -标签。
主要问题是您有两个列表，一个位于另一个列表中，其中填充非常动态，我尝试对其进行更改，以使填充与子弹的动态宽度匹配。
我保留了HTML并更改了一些CSS，以使其表现出所需的效果，但您确实应该考虑使用新的HTML设置。
.meanings_and_examples {
display: flex;
flex-direction: column;
}
.meaning {
font-family: Tahoma,Geneva,sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0,0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}
ol.circle {
list-style-type: none;
border: 2px solid purple;
position: relative;
padding-left: 10vw;
}
li {
line-height: calc(1.1em + 1.5vw);
}
ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 0;
border: 2px solid orange;
padding: 0;
position: relative;
}
ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
position: absolute;
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0,0.2);
width: calc(1.2em + 1.5vw);
transform: translateX(-100%);
}
ul {
list-style-type: none;
padding-left: 0;
border: 2px solid red;
}
.example {
width: auto;
text-align: left;
font-weight: 400;
}
.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
See my modified fiddle表示您要求的行为。
京公网安备 11010802041100号