チェックマークの表示

前提・実現したいこと

ulを使ってチェックマークを表示したい。

発生している問題・エラーメッセージ

マークは消せるのですがチェックマークの画像を挿入するとレイアウトが崩れ調節できません。

該当のソースコード

```html
<ul>
                   <li>予約前に政府発行の身分証明書を求める権限</li>
                   <li>ハウスルールに同意しないと泊まれない</li>
                   <li>過去の宿泊のレビューもばっちり読める</li>
                   <li>財物損害は¥100,000,000まで無料で補償</li>
                   <li>$1,000,000の賠償責任保険が無料で付帯</li>
                   <li>24時間365日対応グローバルカスタマーサポート</li>
               </ul>

ul li {
    line-height: 1.5;
    padding: 0.5em 0;
    list-style-type: none!important;
  }



### 試したこと

<img src="url" align="middle">を使って画像の真ん中に文章を表示させようとしましたが、画像の下のほうに文章が表示されてしまいます。

miyabi_pudding

2020/06/14 16:55

HTMLソースコード内に、imgは存在しないようですが・・・。入れたコードの方を記載いただけませんか？

kyoya0819

2020/06/14 16:56

内容が足りてないです。 - imgはどこにありますか？ - 目標はどのような感じですか？手書きの画像でもいいのでご提示ください。 - CSSのコードも不足しているようです。修正していただけるとスムーズに解決できるかと。

行動規範の内容に同意します

回答1件

ベストアンサー

今ひとつやりたいことが伝わってこないのですが、チェックボックスを置きたかったけどやり方が分からなくて画像で誤魔化そうとしたのか、最初っから画像を置きたかっただけなのか、どっちなんでしょう？

とりあえず、両方のパターンを網羅したコードを書きました。イメージしてたものと違ったらごめんなさい

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>checkbox test</title>
8<style>
9    ul li {  
10        line-height: 1.5;  
11        padding: 0.5em 0;  
12        list-style-type: none!important;  
13    } 
14    img {
15        vertical-align: middle;
16    }
17</style>
18</head>
19<body>
20<p>チェックボックスを使いたかった場合</p>
21<ul>  
22    <li><input type="checkbox">予約前に政府発行の身分証明書を求める権限</li>  
23    <li><input type="checkbox">ハウスルールに同意しないと泊まれない</li>  
24    <li><input type="checkbox">過去の宿泊のレビューもばっちり読める</li>  
25    <li><input type="checkbox">財物損害は¥100,000,000まで無料で補償</li>  
26    <li><input type="checkbox">$1,000,000の賠償責任保険が無料で付帯</li>  
27    <li><input type="checkbox">24時間365日対応グローバルカスタマーサポート</li>  
28</ul>
29<br>
30<br>
31<p>チェックが入った画像を置きたかっただけの場合</p>
32<ul>  
33    <li><img src="checkbox-image.png">予約前に政府発行の身分証明書を求める権限</li>  
34    <li><img src="checkbox-image.png">ハウスルールに同意しないと泊まれない</li>  
35    <li><img src="checkbox-image.png">過去の宿泊のレビューもばっちり読める</li>  
36    <li><img src="checkbox-image.png">財物損害は¥100,000,000まで無料で補償</li>  
37    <li><img src="checkbox-image.png">$1,000,000の賠償責任保険が無料で付帯</li>  
38    <li><img src="checkbox-image.png">24時間365日対応グローバルカスタマーサポート</li>  
39</ul>
40
41</body>
42</html>