0
サイドと上下に余分なスペースがないナビゲーションバーを作成しようとしています。しかし、何もないようです。私がこれを解決できる方法はありますか? image埋め込まれたナビゲーションバーの外観はどうですか?
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
\t object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
\t \t font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="utf-8">
\t <title></title>
</head>
<body>
\t <!-- Navigation Bar -->
\t <ul>
\t \t <li>
\t \t \t <a href="test_webpage.html#about">ABOUT</a>
\t \t </li>
\t \t <li>
\t \t \t <a href="test_webpage.html#products">PRODUCTS</a>
\t \t </li>
\t \t <li>
\t \t \t <a href="test_webpage.html#coupons">COUPONS</a>
\t \t </li>
\t \t <li>
\t \t \t <a href="test_webpage.html#feedback">FEEDBACK</a>
\t \t </li>
\t </ul>
\t <div id='about'>
\t \t <a id="about" name='about'></a>
\t \t <img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
\t \t <div id='about.container'>
\t \t <h2>About:</h2>
\t \t <p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
\t </div>
\t </div>
\t <div id='products'>
\t \t <a id="products" name='products'></a>
\t </div>
\t <div id='coupons'>
\t \t <a id="coupons" name='coupons'></a>
\t </div>
\t <div id='feedback'>
\t \t <a id="feedback" name='feedback'>
\t \t </a></div>
</body>
</html>
私が正しく理解している場合、あなただけのnomarlizeのCSSのリセットの検索を必要とし、それを追加します。あなたが必要とするものをあなたのCSSに追加してテストしてください* {margin:0;} https://jsfiddle.net/0w2xagxc/2/ bodyタグを調べると8pxのマージンがあることがわかりますなぜあなたはその空間を見るのですか? –
私はむしろ '* {margin:0;}の代わりに' html、body {margin:0;} 'を使うでしょう。 – flosommerfeld