2017-07-13 7 views
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>

+0

私が正しく理解している場合、あなただけのnomarlizeのCSSのリセットの検索を必要とし、それを追加します。あなたが必要とするものをあなたのCSSに追加してテストしてください* {margin:0;} https://jsfiddle.net/0w2xagxc/2/ bodyタグを調べると8pxのマージンがあることがわかりますなぜあなたはその空間を見るのですか? –

+0

私はむしろ '* {margin:0;}の代わりに' html、body {margin:0;} 'を使うでしょう。 – flosommerfeld

答えて

0

あなたはマージン(https://www.w3schools.com/css/css_margin.aspを無効にする必要があります:私は見て私のナビゲーションバーをご希望の方法の例ですdootrix.com ここで問題が何であるかを説明するためのイメージです)あなたのボディタグの。あなたはあなたのCSSでこれを行うことができます。このCSSファイルの先頭で私が何をしたかを見てください。それはうまくいくはずです。

body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: mediumblue; 
 
    text-align: center; 
 
    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; 
 
    font-style: italic; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <!-- Navigation Bar --> 
 
    <ul> 
 
     <li> 
 
      <a href="test_webpage.html#about">ABOUT</a> 
 
     </li> 
 
     <li> 
 
      <a href="test_webpage.html#products">PRODUCTS</a> 
 
     </li> 
 
     <li> 
 
      <a href="test_webpage.html#coupons">COUPONS</a> 
 
     </li> 
 
     <li> 
 
      <a href="test_webpage.html#feedback">FEEDBACK</a> 
 
     </li> 
 
    </ul> 
 
    <div id='about'> 
 
     <a id="about" name='about'></a> 
 
     <img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover"> 
 
     <div id='about.container'> 
 
     <h2>About:</h2> 
 
     <p>We are a small family owned convenience store! We have operating since the early 2000s.</p> 
 
    </div> 
 
    </div> 
 
    <div id='products'> 
 
     <a id="products" name='products'></a> 
 
    </div> 
 
    <div id='coupons'> 
 
     <a id="coupons" name='coupons'></a> 
 
    </div> 
 
    <div id='feedback'> 
 
     <a id="feedback" name='feedback'> 
 
     </a></div> 
 
</body> 
 
</html>

関連する問題