html - リスト番号とテキストの両方を左揃えにします

Question

の数字とテキストの両方を左揃えにしたいと思います<ol>。これは私が達成しようとしていることです:

今のところ、それぞれ<li>に が含まれていますが<a>、これは変更される可能性があります。これまでのところ、左パディングを入れてからテキストインデントを<a>.

これが今の私のコードです。

HTML:

<ol class="dinosaurs">
    <li><a>Dinosaur</a></li>
    <li><a>Tyrannosaurus</a></li>
    <li><a>Camptosaurus</a></li>
</ol>

CSS:

.dinosaurs{
    list-style-position: inside;
}

注: Windows 7 の Chrome 23 で Web ページを表示しています。

Answer 1

これはうまくいくようです：

.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before { 
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  display: inline-block;
}

Answer 2

次のようにリスト要素を配置できます。

    .dinosaurs {
  list-style-position: inside;
}

.dinosaurs li{
  position: relative;
}
.dinosaurs li a {
  position: absolute;
  left: 30px;
}

http://jsfiddle.net/wBjud/2/が生成されます

Answer 3

padding-left: 0;スタイルに追加して、必要に応じてに変更list-style-position:してみてください。outside

Answer 4

ポジショニング、パディング、マージンを使用して偽装できます。

jsFiddle の例

.dinosaurs {
  list-style-position: inside;
  position:relative;
  margin-left: -20px;
}
a {
  position:absolute;
  left:70px;
}