メニューバーを固定しようと
potision:fixed;を使用したのですが、
floatの効果がなくなりheaderのbackground-colorも
途切れてしまっています。
何が原因で固定できないのでしょうか？

コード
html
<div class="header">
      <div class="header-list">
        <a href="#" class="btn apple">
        <span class="fab fa-apple"></span></a>
        <ul>
          <li><a href="#">Mac</a></li>
          <li><a href="#">iPad</a></li>
          <li><a href="#">iPhone</a></li>
          <li><a href="#">Watch</a></li>
          <li><a href="#">TV</a></li>
          <li><a href="#">Music</a></li>
          <li><a href="#">サポート</a></li>
        </ul>
        <a href="#" class="btn search">
        <span class="fas fa-search"></span></a>
        <a href="#" class="btn bag">
          <span class="fas fa-shopping-bag"></span></a>
      </div>
    </div>

css

.header {
  background-color:rgba(1,1,1,0.9);
  height:40px;
}

.header-list li a  {
  float:left;
  color:white;
  padding:10px 29px;
  text-decoration:none;
  opacity:0.8;
  font-size:13px;
}

.header-list li a:hover {
  opacity:0.9;
}

Lhankor_Mhy

2020/07/08 07:08

補足願います。・fixed はどこへ適用したのですか？・「単語間のバランス」について詳しく教えてください。どのようなバランスがお望みですか？

kageyama_tobio

2020/07/08 07:15

.header-list li aにfixedをつけました。単語間の間隔を均等に分けて配置したいのですが、メニューバー固定のためfixdを追加後その配置が崩れてしまいました。

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

回答2件

.header-list li a
ではなく
.header-list ulに変更してみたらどうですか？

li aを指定すると
li aのマージンとかも無視で固定されるのでズレます
なので、それを全体的にかこっているulやIDやclasssを指定しすればOKです。

投稿2020/07/08 07:30

AMK

総合スコア765

こういう感じでしょうか？

サンプル

css
1ul{
2  position: fixed;
3}
4li{
5  display: contents;
6}

質問の変更に合わせて追記

サンプル

css
1.header {
2  position: fixed;
3  width: 100%;
4}
5li{
6  display: contents;
7}

投稿2020/07/08 07:27

編集2020/07/13 01:41

Lhankor_Mhy

総合スコア36087

kageyama_tobio

2020/07/08 07:53

floatの効果がなくなり、横に並んでいた単語が縦になってしまいました。バーも固定されません。関係のあるコード下に記しました。「html」 <div class="header"> <div class="header-list"> <a href="#" class="btn apple"> <span class="fab fa-apple"></span></a> <ul> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">サポート</a></li> </ul> <a href="#" class="btn search"> <span class="fas fa-search"></span></a> <a href="#" class="btn bag"> <span class="fas fa-shopping-bag"></span></a> </div> </div> 「css」 .header { background-color:rgba(1,1,1,0.9); height:40px; } .header-list ul { potision:fixed; } .header-list li a { float:left; color:white; padding:10px 29px; text-decoration:none; opacity:0.8; font-size:13px; display: contents; } .header-list li a:hover { opacity:0.9; }