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

Question

请参阅JSFiddle。

这是在代码中带有“ vw”参数的自适应设计。我希望Text_1，Text_2和Text_3水平对齐，这意味着当我更改浏览器的窗口大小时，从屏幕左侧到文本开头的距离为这三个字是一样的。使用current代码对齐它们（通过“ 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

我不确定将ul插入ol有什么意义。但是我认为，如果不是强制性的，则应该分开使用它们，因为您从我所看到的中枚举了相同类型的元素。

然后您的边距存在几个问题：转换数为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。我不确定您是否确实要这样，但是您可以从这里开始。

但是我不得不问：您是否真的需要一个或一个，或者只是使用它们，以便可以在某些元素之前添加计数器？因为最好只使用一个类（用于计数器），并对所有元素使用一个单行列表。

Answer 2

[好，您正在做很多事情，对于您的下一个问题，我将剔除该示例不需要的任何代码，所有样式等。接下来，您一起使用了太多的动态宽度，并且正如Paulie_D所说，除li标记外，您不允许在ul标记或ol标记中放置其他内容。

主要问题是您有两个列表，一个在另一个内，其中填充非常动态，我试图对其进行更改，以使填充与子弹的动态宽度匹配。

我保留了您的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>

See my modified fiddle代表您要求的行为。