0

ナビゲーション バーが一番上まで行かない理由がわかりません。とても簡単な修正だと確信しています。これは全ページ スライダー用です。関連するhtml/cssのみを含めました。それで十分であることを願っています！

HTML

<!DOCTYPE>
<link rel="stylesheet" href="style.css" type="text/css" /> 
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<head>
<title>Full Page Slider</title>
</head>
  <nav>
    <a id="home">Home</a>
    <a id="">About</a>
    <a id="">Contact</a>
    <div class="sliderButtons"></div>
  </nav>

<div id="full-slider-wrapper">
 <div id="full-slider">    
   <div class="slide-panel active ">
      Panel 1 content here
   </div><div class="slide-panel">
      Panel 2 content here
   </div>
  </div>
</div>

CSS

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }


html {
min-width: 100%;
font-family: 'Lato', sans-serif;
}

nav {

text-align: left;
margin-left: 16%;
border-bottom-style:ridge; 
background-color: FF7400;
  }
 nav a {
font-size:20px;
text-decoration:underline;
display: inline-block;
padding: 1em;
 }


div.sliderButtons {
float: right;
margin-right: 20%;

}

#full-slider-wrapper {
    overflow: hidden;
}

#full-slider {
    position: relative;
    width: 800px;
    height: 600px;
    margin: 0 auto;
}


#full-slider .slide-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 600px;
    visibility: hidden;
}

#full-slider .slide-panel.active {
position: absolute;
    visibility: visible;
}

#full-slider-nav {
    position: relative;
    top: 0;
    right: 0;
}

#full-slider-nav-left, #full-slider-nav-right {
    display: inline-block;
    height: 0;
    width: 0;
    margin-left: 15px;
    border: 20px solid transparent;
    cursor: pointer;
}
4

3 に答える 3

1

削除してmargin-left: 16%;変更text-align: left;text-align:center;

Div忘れて使うnav

それがあなたを助けることを願っています。楽しみ。

于 2012-11-01T11:23:01.523 に答える
1

あなたのnav要素はmargin-left: 16%;. そのルールを変更または削除します。

jsFiddle の例

于 2012-10-31T21:10:35.077 に答える
1

つまり、なぜ全幅を取らないのですか？もしそうなら - よく見ると、あなたのナビゲーション セレクターは 16% のマージンを残しています

于 2012-10-31T21:16:27.187 に答える