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

①<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}