ボックスの左寄せ、リンクは、背景色の付いた範囲どこからでもクリックできるには

①<li>のボックスを左寄せに出来ない。

現在、左に余白ができます。

②リンクは、背景色の付いた範囲どこからでもクリックできない

【HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>challenge_box</title> <link rel="stylesheet" href="challenge_box.css"> </head> <body> <h1>検索エンジンリンク</h1> <ul> <li><a href="https:www.google.co.jp">Google</a></li> <li><a href="http://www.yahoo.co.jp">Yahoo!JAPAN</a></li> <li><a href="http://www.bing.com">bing</a></li> </ul> </body> </html>

【CSS】

h1 {
border-bottom: solid 1px;
}
li {
margin-left: auto;
list-style-type: none;
background-color: #ffffe0;
border: solid 1px #000000;
text-align: center;
width: 200px;
margin: 20px;
}

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

回答1件

ベストアンサー

css
1h1 {
2  border-bottom: solid 1px;
3}
4ul {
5  padding: 0;
6}
7li {
8  list-style-type: none;
9  background-color: #ffffe0;
10  border: solid 1px #000000;
11  text-align: center;
12  width: 200px;
13  margin: 20px 0;
14}
15li a {
16  width: 100%;
17  display: inline-block;
18}

とか

css
1h1 {
2  border-bottom: solid 1px;
3}
4ul {
5  padding: 0;
6}
7li {
8  list-style-type: none;
9}
10li a {
11  background-color: #ffffe0;
12  border: solid 1px #000000;
13  text-align: center;
14  width: 200px;
15  display: block;
16  margin: 20px 0;
17}

投稿2019/10/02 23:55

dit.

総合スコア3235

Stay_Home

2019/10/03 01:16

迅速な対応、ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

ボックスの左寄せ、リンクは、背景色の付いた範囲どこからでもクリックできるには

関連した質問