爲什麼我的導航按鈕錯誤地對齊列表內部？

出於某種原因，每當我的網頁在一定的大小範圍內，導航欄中的單詞移動到不同的位置，我不知道爲什麼。爲什麼我的導航按鈕錯誤地對齊列表內部？

要看我在說什麼，看看我的代碼on jsFiddle。將結果窗口拉伸至左側並觀察li按鈕。

HTML：

<head> 
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" > 
</head> 

<header class="row"> 
     <a name="home"></a> 
     <div class="container"> 
      <figure class="col-lg-12"><a href="index.html"><img src="assets/karate-kick.png" height="100" width="400" alt="karate kick"></a></figure> 
      <nav> 
       <ul class="col-lg-7"> 
        <li class="col-md-2"><a href="#about">About</a></li> 
        <li class="col-md-2"><a href="#contact">Contact</a></li> 
       </ul> 
      </nav> 
     </div> 
    </header>

CSS：

nav ul.col-lg-7 { 
    text-decoration:none; 
    float:right; 
    position: relative; 
} 

nav ul li.col-md-2 { 
    list-style-type: none; 
    font-size: 2rem; 
    background-color: white; 
    color:black; 
    border: 3px outset lightgray; 
    margin: 8rem 0 1rem 1rem; 
    float:left; 
    bottom: 5rem; 
    border-radius: 25px;  
    text-align: center; 
    box-shadow: 100px black; 
    padding: 0 5rem; 
} 

nav ul li.col-md-2:active { 
    border: 3px inset lightgrey; 
    position: relative; 
} 

nav ul li.col-md-2:hover { 
    background-color:yellow; 
} 

header div.container { 
    background-color: red; 
} 
div figure { 
    top: 6rem; 
}

來源

2016-04-10 KyleDotExe

放入保證金：8rem 0 1rem 1rem;進入nav ul.col-lg-7聲明 – jeff

以某種方式** jeff **是對的：[請參閱此處的JsFiddle的修改版本]（https://jsfiddle.net/LoicMars/t7sunb6j/2/） – LoicTheAztec

@凱爾結帳我的回答 – AVI

你關心網站的移動版本？如果你不這樣做，我中有你正在尋找的地方：

嘗試修改此：

<li class="col-md-2"><a href="#about">About</a></li> 
<li class="col-md-2"><a href="#contact">Contact</a></li>

要這樣：

<li class="col-md-2"><a href="#about" class="navLinks1">About</a></li> 
<li class="col-md-2"><a href="#contact" class="navLinks2">Contact</a></li>

然後添加到你的CSS的頂部：

.navLinks{ 
    position:relative; 
    right:28px; 
} 

.navLinks2{ 
    position:relative; 
    right:33px; 
}

這使得文本正確居中，但在移動網站上，沒有那麼多。

來源

2016-04-10 23:49:22 HawkBlade124

謝謝你試圖幫助，但我的問題是從我在移動網站上工作哈哈。該網站在桌面上全屏顯示時看起來不錯，但它是平板電腦屏幕寬度，開始搞亂了。但令人困惑的是，它可以在手機寬屏上使用，而不是平板寬度。我認爲它約爲1000像素至1200像素，看起來很奇怪。抱歉有任何困惑或缺乏清晰度。 – KyleDotExe

問題是你沒有附加你的引導程序，jQuery CDN正確地將這些CDN附加到你的<head>標籤。這就是爲什麼這些按鈕被搞砸了。

<head>  
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head>

這裏是CODEPEN的例子。

編輯：

如果這些引導文件位於locally.then嘗試添加下面的結構，因爲看起來你沒有正確添加jQuery的參考。

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Bootstrap 101 Template</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <!-- Bootstrap --> 
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
     </head> 
     <body> 

<header class="row"> 
     <a name="home"></a> 
     <div class="container"> 
      <figure class="col-lg-12"><a href="index.html"><img src="assets/karate-kick.png" height="100" width="400" alt="karate kick"></a></figure> 
      <nav> 
       <ul class="col-lg-7"> 
        <li class="col-md-2"><a href="#about">About</a></li> 
        <li class="col-md-2"><a href="#contact">Contact</a></li> 
       </ul> 
      </nav> 
     </div> 
    </header> 
     <script src="http://code.jquery.com/jquery.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     </body> 
    </html>

來源

2016-04-11 00:01:14 AVI

哦，在我的代碼中，我將bootstrap文件下載到我的電腦上，並將它們添加爲本地文件。我只是在我的問題中將它們聯繫起來，因爲我試圖幫助那些幫助我解決我遇到的確切問題的人。我對這種混亂表示抱歉。 – KyleDotExe

@ KyleTheBoss95那麼這些引導文件位於哪裏？ – AVI

@ KyleTheBoss95我更新了答案 – AVI

爲什麼我的導航按鈕錯誤地對齊列表內部？

回答

相關問題