floatを用いたレイアウトで下記画像のようなレイアウトを実現したいです。
名前の右横に20pxくらい隙間開けたいのですが、
text-indent: -1em;
、padding-left: 1em;
を指定しているのでpaddingでうまく空けることができません。
何かいい手段ありますでしょうか?
下記がコードになります。
html
1<div class="wrap"> 2<div class="box"> 3<img src="https://placehold.jp/500x200.png" alt=""> 4<p><span class="name">名前</span><span class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p> 5 <p><span class="name">名前</span><span class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p> 6 <p><span class="name">名前</span><span class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p> 7 <p><span class="name">名前</span><span class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストストテキストテキストテキストテキストテキストテキストテキスト</span></p> 8</div> 9</div> 10 11<style> 12.wrap { 13 width: 1000px; 14 margin: 0 auto ; 15} 16.box img { 17 float: right; 18} 19.box p { 20 margin-bottom: 10px; 21 padding-left: 2em; 22 text-indent: -2em; 23} 24.box .name { 25 width: 40px; 26} 27.box .text { 28} 29</style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/20 23:20