文章/答案/技术大牛

发布

社区首页 >问答首页 >导航栏定位

问导航栏定位
EN

Stack Overflow用户

提问于 2012-11-01 05:08:35

回答 3查看 184关注 0票数 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;
}

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-11-01 05:10:35

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

票数 1

Stack Overflow用户

发布于 2012-11-01 05:16:27

你的意思是--为什么它不是全宽的？如果是这样的话-仔细看看，你的导航选择器的左边距为16%

票数 1

Stack Overflow用户

发布于 2012-11-01 19:23:02

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

使用Div忽略nav

希望能对你有所帮助。好好享受吧。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13167463

复制

相似问题

问导航栏定位
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏定位EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏定位
EN