ナビゲーションボタンがリスト内で正しく配置されていないのはなぜですか？

何らかの理由で、私のウェブページが特定のサイズ内にあるときは常に、ナビゲーションバー内の単語が別の場所に移動します。ナビゲーションボタンがリスト内で正しく配置されていないのはなぜですか？

私の話を見るには、私のコード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

@Kyle checkout私の答え – 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の例があります。

EDIT：

それらのブートストラップファイルは、あなたのようなルックスが適切にjQueryの参照を追加していないので、次のような構造を追加しようlocally.then配置されている場合。

<!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

ああ、私のコードでは、ブートストラップファイルを自分のコンピュータにダウンロードし、それらをローカルファイルとして追加しました。私は私が遭遇していた正確な問題を手伝ってくれる人を助けようとしていたので、私の疑問のようにそれらを結びつけました。私は混乱のためにお詫び申し上げます。 – KyleDotExe

@ KyleTheBoss95だから、ブートストラップファイルはどこにありますか？ – AVI

@ KyleTheBoss95私は答えを更新しました – AVI

ナビゲーションボタンがリスト内で正しく配置されていないのはなぜですか？

答えて

関連する問題