1

HTML/CSSを使用してこれを正確に表示したい：

This is a paragraph.
1. This is a list item.
   Continuation of list item: using list-style-position:outside.
This is another paragraph.

私が抱えている問題は、 (前の行から) が1.並んでいないことです。これは に固有の存在によるものですよね? すべてのブラウザ/デバイスで一貫してこれを取り除くにはどうすればよいですか? 魔法が働いているように見えます (私のデスクトップ ブラウザーでは機能しますが、モバイル ブラウザーでは機能しません)。しかし、この魔法はどこから来たのでしょうか?ThThispadding-leftolol { padding-left: 22px }22px

便宜上、フォークして css を作成できるjsfiddleを次に示します。

4

6 に答える 6

2

編集 2:counterこれは、デフォルトの番号付けの代わりに使用する例です。その理由は、9 を超えると、前の例の数字が左に抜け始めるからです: http://cdpn.io/izrAh

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

p, ol {margin: 0; padding: 0;}
    ol {list-style: none;}
li {
    padding-left: 30px; 
    counter-increment: nums; 
    position: relative;
}

li:before {
    content: counter(nums);
    position: absolute;
    left: 0px;
}

</style>

</head>
<body>

<p>This is a paragraph of text.</p>
<ol>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
</ol>
<p>This is a paragraph of text.</p>

</body>
</html>

EDIT1: (list-style: outsideデフォルト) の方が簡単です: http://codepen.io/pageaffairs/pen/tiALm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

p, ol {margin: 0; padding: 0;}
ol {width: 150px}
li {margin-left: 18px;}

</style>

</head>
<body>

<p>This is a paragraph of text.</p>
<ol>
    <li>This is a list item
        Continuation of list item.
    </li>
</ol>
<p>This is a paragraph of text.</p>

</body>
</html>

最初の試み：次のようなものはどうですか：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

p, ol {margin: 0; padding: 0;}
ol {list-style: inside; width: 150px}
li {text-indent: -16px; padding-left: 18px;}

</style>

</head>
<body>

<p>This is a paragraph of text.</p>
<ol>
    <li>This is a list item
        Continuation of list item.
    </li>
</ol>
<p>This is a paragraph of text.</p>

</body>
</html>

<ol>注:行の折り返しを示すために、 に小さな幅を設定しました。<br>別の方法は、行を折り返したい場所で使用することです。

于 2013-05-25T09:18:29.083 に答える
2

すでに述べたように、パディング プロパティを調整できます。list-style-position も設定する必要があるかもしれません。

ol { list-style-position:inside; padding:0; }

フィドル

何らかの理由で を使用する必要がある場合はlist-style-position:outside、左側のパディングを約 20px (数字とテキストの間の距離) に増やして、同様の結果を達成してください。

ol { list-style-position:outside; padding-left:20px; }

フィドル

于 2013-05-25T09:12:25.997 に答える
1

使用していない唯一の理由が、<pre>行の折り返しが必要な場合:

p {
    font-family: monospace;
    white-space: pre-wrap;
}

http://jsfiddle.net/T59Ha/3/

于 2013-05-25T09:08:14.800 に答える
1

Chrome の開発者ツールを使用して見てみると、ユーザー エージェント スタイル シートが という名前のプロパティを に設定していることがわかります-webkit-padding-start。40pxこれolは Firefox にも当てはまります。padding-lefttoを設定してこのプロパティをオーバーライド1.3emすると、すべてのブラウザで対応するようになります。に基づいて値が計算されるため、 に関係なく、1.3emの数値とテキストの間の距離は常に等しいようです。lifont-sizeemfont-size

ol {
    list-style-position: outside;
    padding-left: 1.3em;
}

ここにあるjsFiddle

于 2013-05-25T09:55:44.220 に答える
0

CSS を変更せずに、次のように <br/> タグを使用して偉業を達成できます。

<p>Previous paragraph</p>
<ul>
  <li>Test here<br/>
      And there</li>
</ul>
<p>Next paragraph</p>

CSS でそれを実現するには、 <li> と <br/> がどのように設定されているかを確認できます。

簡単な注意: もちろん <ol> でも動作します。

于 2013-05-25T09:33:43.237 に答える