順序付けられていないリスト要素をナビゲーション メニュー バーに並べて配置しようとしています。
問題:
ディスプレイを「インライン」に設定しましたが、違いはないようです。ナビゲーション バー (css の .nav) が幅のスペースの 100% を占有していません。幅を 100% にしてこれを修正しようとしましたが、ナビゲーション バーの両側に隙間があります。- 最後に、ウィンドウが全画面表示になると、背景画像が拡大するためにナビゲーション バー (.nav) の位置が変更されます。ウィンドウが大きくなったときに背景が拡大しないようにする方法はありますか?ナビゲーションバーの位置に影響を与えますか?
以下は私の試みです。誰かが私が間違っている場所を見つけることができますか? とても有難い。
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nav">
<h1 class="logo">LogoHere</h1>
<ul class="nav-menu">
<li>Action</li>
<li>Who we are?</li>
<li>Blog</li>
<li>Services</li>
<li>Get in touch</li>
</ul>
</div>
</body>
</html>
CSS:
.nav{
background-color: #2EC0FE;
opacity: 0.75;
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
background-image: -o-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: -moz-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: -ms-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
height: 100px;
width: 100%;
margin-top: 600px;
}
.logo{
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 54px;
line-height: 40px;
letter-spacing: -5px;
color: white;
margin: 0 0 0 0;
padding-top: 25px;
padding-left: 25px;
font-weight: 100;
}
.nav-menu
{
list-style-type: none;
display: inline;
text-align: center;
font-size: 20px;
color: white;
padding: 0px;
margin-top: 0px;
}
画像の問題 3: これは、ウィンドウが全画面表示されていない場合であり、ナビゲーション バーを配置したい方法です。
以下は全画面表示で、背景画像が拡大され、ナビゲーションバーの位置が最初の画像よりもはるかに高くなっていることがわかります。
