responsive-design - 响应式网页设计中的有序列表和列表

Question

我是响应式网页设计的新手，我不确定为什么有序列表和列表不像页面的其余部分那样响应。

#container {
  text-align: center;
}

ol {
  text-decoration: none;
  font-family: helvetica; 
  width: 100%;
  text-align: center;
  margin-left: 500px;
  text-decoration: none;  
}


li {
  text-decoration: none;
  font-family: helvetica; 
  letter-spacing: 3px;
  line-height: 25px;
  color: green;
  width: 100%;
  padding-bottom: 10px;
  font-size: 10px;
  text-align: left;
}

<div id="container">
  <h2>Step 1: Choose Your Drink</h2>

  <ol>
    <li>Chai Latte</li> 
    <li>Americano</li>
    <li>Pumpkin Spice Latte</li>
    <li>Vanilla Bean Frappuccino</li>
  </ol>

  <h2>Step 2: Join Us! and receive daily drink recipes.</h2>
</div>

有什么建议么？

谢谢！

Answer 1

ol{margin-left: 500px} 是罪魁祸首。

尝试以下更改

ol{
  font-family: helvetica;
  text-decoration: none;
}

li{
  text-decoration: none;
  font-family: helvetica;
  letter-spacing: 3px;
  line-height: 25px;
  color: green;
  padding-bottom: 10px;
  font-size: 10px;
  list-style-position: inside;
}

我不认为这正是你要找的，但它应该让你更接近