導航欄定位 - 優文庫

我無法弄清楚爲什麼我的導航欄不會一直穿過頂部！我相信這是一個超級簡單的解決方案。這是一個完整的頁面滑塊。我只包含相關的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; 
}

來源

2012-10-31 Anthony

您能否包含您的問題的圖像？很難說出你的問題是什麼。如果你刪除了「保留餘量：16％;」？ –

你nav元素有margin-left: 16%;。更改或刪除該規則。

jsFiddle example

來源

2012-10-31 21:10:35 j08691

哇我很愚蠢。我的意思是推動導航元素，而不是整個導航。謝謝 – Anthony

你的意思是 - 爲什麼它不採取全寬？如果是這樣的 - 仔細看，你的資產淨值選擇了16％的保證金左

來源

2012-10-31 21:16:27 rxtxr

刪除margin-left: 16%; &變化text-align: left;到text-align:center;

使用Div忘記nav

希望它可以幫助你。請享用。

來源

2012-11-01 11:23:01

回答

相關問題