Q&A
コードはりつけてみたんですが普通に聞いてるように見えます。サイズを小さくしたときに次の行にいくのは仕方ないと思いますが… あと "main scroll-nofixed を閉じるのを忘れてるので～のレイアウトが崩れてますが float とは関係なさそうに見えます。
よく見かけるヘッダー固定のホームページを作りたいです。ヘッダー内に[float: right],[float: left]を使いましたが、[position: fixed]を適用すると[float]の効果が無くなってしまいました。なぜでしょうか？
ここに質問の内容を詳しく書いてください。
html
</head> <body> <div class="scroll-fixed"> <header> <div class="container"> <div class="header-left">Pipe Smoking</div> <div class="header-right"> <ul> <li><a href="index.html">トップ</a></li> <li><a href="pipetool.html">パイプとツール</a></li> <li><a href="review.html">タバコレビュー</a></li> </ul> </div> </div> </header> </div> <div class="main scroll-nofixed> 〜 </div> </body>css
header {
height: 48px;
background: linear-gradient(0deg,#bfa46f,#eee);
}
.scroll {
position: fixed;
top: 0;
z-index: 10;
}
.header-left {
float: left;
color: #005522;
line-height: 48px;
font-family: serif;
font-style: italic;
font-size: 26px;
/* background-color: #f19072; */
padding-left: 15px;
padding-right: 15px;
}
.header-right {
float: right;
line-height: 48px;
}
.header-right li {
list-style: none;
float: left;
margin-left: 5px;
margin-right: 10px;
}
回答1件
0
ベストアンサー
codepenで実装してみましたが、動いているみたいですね。
https://codepen.io/takuhito-h/pen/QWwqXLv
おそらくposition: fixedにすると要素が画面幅いっぱいに広がらなくなるので、floatが効かなくなったように感じるのではないんでしょうか？
position: fixedの要素を画面幅いっぱいに広げたい場合は、
css
1position: fixed; 2left: 0; 3right: 0;
としてあげると良いと思います。
上のcodepen上で動いているので確認してみてください。
投稿2020/01/02 09:22
総合スコア142
遅くなりました。実はまだうまくいっていません。おそらく下行のCSSで何か変なことをやってしまってるんだと思います。もう一度見直してみます。詳しい回答をありがとうございました。
あなたの回答
tips
プレビュー
