サイドバーの縦並びのliについて

Question

サイドバーに縦並びのliを入れたいのですがうまくいきません。

<aside>
  <h3>about us</h3>
       <div class="about">
        <ul>
          <li><a href="#">home<br>
          <span>家</span></a></li>
          <li><a href="#">home<br>
          <span>家</span></a></li>
          <li><a href="#">home<br>
          <span>家</span></a></li>
        </ul>
    </div>
</aside>

こんな感じのコードなのですが、

h3 は text-align: center;でasideの真ん中にもって来れたのですが、
liの部分が真ん中に来てくれません。

.about a {
 display: block;
  width: 100％;
  text-decoration: none;
  color: #000; 
}

span {
  font-size: 10px;
  padding-bottom: 10px;
}

.about a :hover {
background-color: rgba(245,172,24,0.3)
}

あとhoverしたときに色を付けたいのですが、spanタグの中にしか色がついてくれません。
li全体に色を付ける場合はどんな感じでコードを書けばいいのでしょうか。

Comments

[kei344]

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

[o-ban]

ありがとうございます。こんな感じでいいのでしょうか。

Answer 1

.about a { /* ADD */
  text-align: center;
}

/*
.about a :hover {
        ↓ スペースを入れると a要素の中の要素のhover時にのみ適用される */
.about a:hover {/* 略 */}
```**動くサンプル：**[https://jsfiddle.net/6o5nx90u/](https://jsfiddle.net/6o5nx90u/)

Comments

[o-ban]

サンプル付きでありがとうございます！自分の思うようにコーディングできると
気持ちいいですね！

Answer 2

下記の様なイメージでしょうか？ ulのスタイルを追加しました。hoverもされると思います。

<aside>
    <h3 style="text-align: center;">about us</h3>
       <div class="about">
        <ul style="text-align: center;list-style-position: inside;">
          <li><a href="#">home<br>
          <span>家</span></a></li>
          <li><a href="#">home<br>
          <span>家</span></a></li>
          <li><a href="#">home<br>
          <span>家</span></a></li>
        </ul>
    </div>
</aside>

<style type="text/css">
    .about a {
      /*display: block; リストが改行されるため*/
      width: 100%;
      text-decoration: none;
      color: #000; 
    }

    span {
      font-size: 10px;
      padding-bottom: 10px;
    }

    .about a:hover {
        background-color: rgba(245,172,24,0.3)
    }
</style>

Comments

[o-ban]

ありがとうございました！きれいに真ん中に来ましたし、ホバーもできます。
うれしーい！！