在自适应设计中水平对齐列表项

Question

请参阅JSFiddle。

这是一个自适应设计，代码中包含"vw"参数。我希望Text_1、Text_2和Text_3水平对齐，这意味着当我更改浏览器的窗口大小时，这3个单词从屏幕左侧到文本开头的距离相同。使用当前代码，我将它们对齐(通过"margin"属性(，但一旦浏览器的窗口大小发生变化，Text_2和Text_3就会相对移动到Text_1(窗口大小减小时向右移动，增大时向左移动(。请问代码出了什么问题？

<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
<li><span class="example">Text_2</span></li>
<li><span class="example_translated">Text_3</span></li>     
</ul>
</ol>
</div>
.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, 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, 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;
}

Answer 1

好吧，你有很多事情要做，对于你的下一个问题，我会去掉这个例子不需要的任何代码，所有的样式等等。接下来，您将使用太多的动态宽度，正如Paulie_D所说，您不允许在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, 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, 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;
}

<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
<li><span class="example">Text_2</span></li>
<li><span class="example_translated">Text_3</span></li>     
</ul>
</ol>
</div>

请看我修改过的小提琴，看看你要求的行为。

Answer 2

我不确定在ol中插入ul有什么意义。但我认为若不是强制性的，你们应该分别使用它们，因为你们列举的是我所看到的相同类型的元素。

然后你的保证金有几个问题：你的竞争对手有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);的保证金

我在这里做了一个工作示例。我不确定你是否想要这样，但你可以从这里开始。

但我不得不问：你真的需要一个和一个吗？还是你只是使用它们，这样你就可以在一些元素之前添加计数器？因为最好只使用一个类(用于计数器(，并为所有元素使用sigle列表。