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

你的nav元素有margin-left: 16%;. 更改或删除该规则。

jsFiddle 示例

于 2012-10-31T21:10:35.077 回答
1

你的意思是 - 为什么它不占用整个宽度？如果是这样 - 仔细观察，您的导航选择器的左边距为 16%

于 2012-10-31T21:16:27.187 回答
1

删除margin-left: 16%;并更改text-align: left;为text-align:center;

使用Div忘记nav

希望它可以帮助你。享受。

于 2012-11-01T11:23:01.523 回答