Question

我无法弄清楚为什么我的导航栏不能一直穿过顶部！我确信这是一个非常简单的解决方案。这是一个整页滑块。我只包含了相关的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;
}

Answer 1

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

<强> jsFiddle example

Answer 2

你的意思是 - 为什么不采取全宽？如果是这样 - 仔细观察，您的导航选择器的边距为16％

Answer 3

删除margin-left: 16%;＆amp;将text-align: left;更改为text-align:center;

使用Div忘记nav

希望它对你有所帮助。享受。

导航栏定位

3 个答案: