导航栏定位答案

【问题标题】：Nav bar positioning导航栏定位
【发布时间】：2012-11-01 19:23:01
【问题描述】：

我不明白为什么我的导航栏没有一直到顶部！我敢肯定这是一个超级简单的修复。这是一个整页滑块。我只包括了相关的 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;
}

【问题讨论】：

能否附上您的问题的图片？很难说你的问题是什么。如果删除 margin-left: 16%; 会发生什么？

标签： html css

【解决方案1】：

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

jsFiddle example

【讨论】：

哇，我太傻了。我的意思是推动导航元素而不是整个导航。谢谢

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

使用Div 忘记nav

希望对您有所帮助。享受吧。

【讨论】：