css記述の再質問

質問

画像を添付します。
このようなことをcssでやりたいのですが。

回答No.5

amaryllis_watch · ベストアンサー

全てのブラウザに同じようなレイアウトにすることは困難です。
少しでも良いから、近づけるようにレイアウトにするためにはcssハックを使うことになります。
https://netamame.com/browser-css-hack

お礼

なるほど、ブラウザーの環境によって違うんですね。
これからはEdgeでみようと思います。
思い通りの結果になってくれているので感謝感激です。
ありがとうございました。

回答No.4

amaryllis_watch

お待たせしました。

.list{ }の中に「margin:0;」を加えれば出来ます。

補足

ありがとうございます。
普段使用しいるブラウザーは、Chrome。
これで見ると、なぜかChromeでは(1)または(2)の頭は不揃いになります。
（marginを入れる前は正常）

因みにＩＥ、Microsoft Edgeで見ると思い通りの結果になりました。

私のChromeが可笑しいのでしょうか？
履歴やキャッシュなどを削除しても直りません。

回答No.3

amaryllis_watch

＞右括弧の次から折り返しをしたいんですが。

そういうときは、まず
.list { }の中に下記を追加します。
padding-left:1.8em;
text-indent:-1.8em;

次は、行間を詰める方法は、
.content { }の中にある
ine-heightの値を小さく変えて下さい。

補足

回答ありがとうございます。
padding-left:1.8em;
text-indent:-1.8em;
を追加したら意図した通りに折り返してくれました。

ただine-heightの値を小さく変えても折り返したときの行間は狭くなりましたが、次の<p>タグ(2)を入力したときの上が空いてしまいます。
イメージで書くと、

1.(1)テキストテキスト
　　折り返し
　（－－ここの行間が空くーー）
　(2)テキストテキスト
　　折り返し

回答No.2

amaryllis_watch

なるほど。
01からの連番でいくなら、先回に回答したcssの
.list:before {
content:"(" counter(list) ")";
}
を
.list:before {
content: "(" counter(list, decimal-leading-zero) ")";
}
に変更すれば(01)、(02)…になります。

補足

ありがとうございます。
下記のhtmlで行ったところ、テキストが折り返したときに、左括弧の頭で折り返します。
右括弧の次から折り返しをしたいんですが。

また、<p>タグで(2)を入力したとき、（1)と(2)の間が空いてしまいます。あかさないで続けることはできますか。

HTML
<div class="contents">
<ol>
<li>
<p class="list">テキストの折り返しテキストの折り返しテキストの折り返しテキストの折り返しテキストの折り返し</p>
<p class="list">テキストの折り返しテキストの折り返しテキストの折り返しテキストの折り返しテキストの折り返し</p>
</li>
<li>
<p>テキスト</p>
</li>
</ol>
</div>

CSS
.contents {
width : 600px;
counter-reset:list;
line-height: 1.5em;
}
.list {
counter-increment:list;
}
.list:before {
color:red;
content: "(" counter(list, decimal-leading-zero) ")";
}

回答No.1

amaryllis_watch

前回の質問を放置して再度質問とはどういうことだ。
違うなら、質問して分かる(解決する)ようにするまで質問して解決ならなくても、その質問を締切ってから新しく質問を立てて下さい。

本題に移します。
回答する前に聞きます。
括弧内の数字は連番じゃないの？

補足

ご迷惑をかけてすみません。
画像を貼ればよかったんですが、Google Chromeでは貼ることができなくて、Windows10のEdgeで質問しました。
本当にスミマセン。

かっこ内の数字は連番ですが、手作業で入力しています。
1桁のものと2桁のものとでは頭がそろわないので、2桁を基本にしたいと思っています。
1桁は(01)とかいう風に。