1

http://krill.larvit.se/resihop_dev/、右列の順序付きリスト。

HTML:

<ol class="instructions">
  <li>
    <p>För att hitta samåkningar, klicka på kartan på platsen du vill åka ifrån.</p>
  </li>
</ol>

私が信じているのは、関連する CSS です。

.instructions{
    padding-left: 0;
}
.instructions li{
    padding: 0 10px;
    margin: 0 0 10px 0;
    list-style-position: inside;
    font-size: 25px;
}

.instructions li p{
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 360px;
}

Internet Explorer 9 では、「1」の右側に大きなスペースが追加されます。これについて何ができますか？可能であれば、html マークアップを保持したいと思います。

4

2 に答える 2

0

タグは必要のないリスト エントリであるため、<p>タグ内から削除します (リスト エントリに段落を追加しただけです)。その後、タグとタグのスタイルを設定するだけです。<li><ol><li>

于 2012-11-01T23:53:25.473 に答える
0

ブラウザごとにレンダリングが少し異なりますが、個人的には次のようにします。

.instructions li{
    padding: 0;
    margin: 0 0 10px 30px;
    font-size: 25px;
}

これはすべてのブラウザーでかなり近くに表示されます。より近く表示したい場合は、1. のフォント サイズを小さくするか、段落に -XXpx の左マージンを追加する必要があります。

.instructions li p{
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 360px;
    margin-left:-8px;
}

もう 1 つの方法は、数値を CSS スプライト + 背景画像として li に配置することです。

于 2012-08-13T16:01:13.963 に答える