float: leftがきかない　なぜ？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5<title>aaa</title>
6<link href="css/style.css" rel="stylesheet" type="text/css" />
7</head>
8
9<body>
10  <header>
11<h1>練習だよ！！</h1>
12    <nav>
13      <ul>
14      <li>aaaaaaa</li>
15        <li>bbbbbbb</li>
16        <li>ccccccc</li>
17        <li>ddddddd</li>
18      </ul>
19    </nav>
20    </header>
21</body>
22</html>
23

css
1@charset "UTF-8";
2
3body{
4  background-color: aqua;
5}
6header{
7  width: 100%;
8}
9
10header h1{
11  float: left;
12}
13
14nav
15{float: right;
16}
17
18nav ul li {
19  list-style: none;
20}
21nav ul li a{
22  width: 300px;
23  float: left;
24}

navを右に寄せて、それを横にならべたいのですが、
nav ul li aのfloat：leftがうまくいきません。なぜでしょうか？
どうしたらうまくいくでしょうか。

kei344

2018/04/17 17:04

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

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

回答1件

ベストアンサー

floatの対象とされているa要素が存在しません. また, a要素が有ったとしても辻褄が合わないため, おそらくli要素のfloat:left設定を施すのが妥当ではないでしょうか？

CSS
1body{
2  background-color: aqua;
3}
4header{
5  width: 100%;
6}
7header h1{
8  float: left;
9}
10nav{
11  float: right;
12}
13nav ul li {
14  list-style: none;
15  width: 300px;
16  float: left;
17}