0
ナビゲーションバーは画面のほぼ端まで伸びていますが、大きな画面では意図した制限に達していません。ウェブサイトを作成する際の初心者です私はここに問題が何であるかの助けを求めたいと思います。幅のパーセンテージを使ってみましたが、画面を小さくするとコンテンツがすべて乱れてしまいます。私はebay私は推測する。他の画面で小さく見えるナビゲーションメニューの問題
.search [type=text]{
width: 30em;
\t position:absolute;
\t top:6%;
\t left:15%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 1em;
background-color: white;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
\t
}
.Navigation{
\t font-family:Arial;
\t font-size:1em;
\t width:80.9em;
\t position:fixed;
\t top:6em;
\t left:2em;
list-style-type: none;
\t padding:0%;
\t border-bottom: 1px solid grey;
\t border-top: 1px solid grey;
}
.Navigation a {
float: left;
\t
}
.Navigation li a{
display: inline-block;
color: #484849;
text-align: center;
padding: 0.7em 4.93em;
\t text-decoration: none;
\t
}
.Navigation a:hover {
border-bottom: 1px solid red;
}
/* class="active" */
.active {
\t border-top: 1px solid red;
border-bottom: 1px solid red;
\t
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
\t <style type="text/css">
\t .logo{
\t \t position:absolute;
\t \t top:1em;
\t \t left:3em;
\t }
\t
\t </style>
</head>
<body>
<a class="logo" href="index.php"><img src="logo.png" alt="logo Icon" height="80"></a>
</body>
<div class="wrapper">
<ul class="Navigation">
<li><a href="Mobiles.php">Mobiles</a></li>
<li><a href="Vehicles.php">Vehicles</a></li>
<li><a href="Games.php">Games</a></li>
<li><a href="Clothes.php">Clothes</a></li>
<li><a href="Accessories.php">Accessories</a></li>
<li><a href="Other.php">Other</a></li>
</ul>
</div>
<form class="search">
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
</html>
私は応答性の高いメニューを作成していますか？あなたがブラウザのサイズを変更することができ、メニューがすべてのコンテンツが切り取られたときに変更されることはありません。 – Alaa
％を使用すると幅が変更されます。あなたが何を記述しているのか、@mediaのクエリを使うでしょう、彼らはあなたのニーズに正確に答えます:) – Shtut