0

私はレスポンシブ Web デザインに慣れていないので、番号付きリストとリストがページの残りの部分のようにレスポンシブでない理由がわかりません。

#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>

助言がありますか？

ありがとう！

4

1 に答える 1

0

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;
}

これはまさにあなたが探していたものではないと思いますが、あなたに近づくはずです

于 2013-01-24T07:02:25.420 に答える