無秩序リストはゆっくりとロードされ、1〜2秒間垂直に整列された後、水平に整列されますか？

私はこのポストを見ましたNavigation Menu CSS loads slowly, causes it to align vertically for a few seconds? 試しましたが、助けになりませんでした。無秩序リストはゆっくりとロードされ、1〜2秒間垂直に整列された後、水平に整列されますか？

asp.netプロジェクトで使用しています。 Site.Masterコード：1〜2秒後に

<head> 
    <style> 
      .body { 
       font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
      } 

      .navbar { 
       margin-bottom: 0; 
       background-color: black; 
       z-index: 9999; 
       border: 0; 
       font-size: 12px !important; 
       line-height: 1.42857143 !important; 
       letter-spacing: 2px; 
       border-radius: 0; 
       font-family: Montserrat, sans-serif; 
      } 

       .navbar li a, .navbar .navbar-brand { 
        color: black !important; 
       } 

      .navbar-nav li a:hover, .navbar-nav li.active a { 
       color: #fff !important; 
       background-color: #fbb534 !important; 
      } 

      .navbar-default .navbar-toggle { 
       border-color: transparent; 
       color: #fff !important; 
      } 
     </style> 
</head> 
<body data-target=".navbar"> 
    <header> 
       <nav class="navbar navbar-default" style="margin-bottom: 0px; clear: none; background-color: white; border-color: white;"> 
        <div class="container" style="margin-left: 0px;"> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 
          <img src="../../Images/Logo.png" width="130" height="40" style="margin-right: 40px;" /> 
         </div> 
         <div class="collapse navbar-collapse" id="myNavbar" > 
          <ul class="nav navbar-nav navbar-left"> 
           <li style="padding-left: inherit"><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li> 
           <li style="padding-left: inherit"><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li> 
           <li style="padding-left: inherit"><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li> 
           <li style="padding-left: inherit"><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li> 
           <li style="padding-left: inherit"><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li> 
          </ul> 
         </div> 

        </div> 
       </nav> 
      </header> 
</body>

：

---------------- ------ここで始める編集-----------------------

注：ブートストラップCSSは使用されていません。またはその。 site.masterのプレーンcssとhtmlが使用されています。

私はついに自分の問題を見つけました。

トライアル：回答に含まれているすべての提案を試してみましたが、ありがとうございましたが、役に立たなかったのです。

問題：コンテンツがない空のaspxページを作成し、マスターページをロードしました。私が見るものは以下の通りです：、一部のコンテンツが読み込まれたページが、それはこのように正確にナビゲーションバーを設定したときに一方

それが1~2秒間空になると、管理ページがロードのように見え、私がしたので、何

が、私はそれがあまり醜い作るために:(

li{ 
display: inline; 
}

コードの下に置いている：それはレンダリングするときには、正しいスタイルを設定します

これは次のように表示されます：

他の提案はありますか？

出典

2016-08-17 Sak

あなたのページのタイムラインをチェックしようとしましたか？ロードからスタイルの適用まで何が待っているかを確認してください。 devモードでChromeのタイムラインを使用します。ネットワークにも刻むことを忘れないでください。 – JaredT

JSfiddle（または同様のもの）でも複製できますか？これは、通常、より明確かつ迅速な答えを得る。人々がちょうど推測から防ぐ。 – JaredT

私はそれをjsfiddleに入れて、それをよりよく説明しようとします。とにかくそれを置くことができますか？ – Sak

あなたのコードは、ブートストラップを含める一部が欠落している、それが主なポイントです。あなたのnavbarはBootstrapによってスタイルされているので、BootstrapのCSSファイルがロードされるまでスタイルされません。 <link>要素のページの<head>部分にブートストラップCSSを挿入します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

これは、ブートストラップなしで、あなたのコードです：https://jsfiddle.net/xa2ychxn/、これは<head>セクションのブートストラップのCSSファイルを使用してコードです：https://jsfiddle.net/edaovwjt/

ブートストラップ（ナビゲーションバーナビゲーションバー-デフォルト）からクラス名を使用しています。 navbarをインラインにするためのCSSコードがないので、最終的に何か他のものがロードされることを意味する期待される結果を得ると、それはブートストラップです。

私はAjaxを使ってページに何かをロードしていると思います。読み込まれるコンテンツにはブートストラップのCSSが含まれています。だからこそあなたはそれを使っているのか、ページのレンダリングの後にいつロードされるのか分かりません。

出典

2016-08-30 08:23:02 Derek

OPは1-2秒でスタイリングされると言った。彼が必要とするものはすべてロードされています。彼が何をロードしたかどうかの質問ではありません。その速さやそれを遅らせることは、私が傷つけると思う。 – JaredT

CSSローディングコードの配置場所によっては、CSSのロード前または後にページのレンダリングが開始されます。私は彼が既にブートストラップのCSSファイルを読み込んでいることを知っています。質問は* *です。そして、headタグが提供されたコードにあり、ブートストラップを含んでいないので、私は彼が間違った場所でそれを呼んでいると仮定します。 – Derek

ああ、私はあなたの答えが全くスタイルが読み込まれていない理由に関する質問に答えることができるので、彼はまったく読み込んでいないことを暗示していると思いました。うん、OPは彼ができるならば、彼が直面していることを完全に示すために（人が実際に完全なコードを投稿する）フィドルを作成するか、コード全体を配置する必要があります。 – JaredT

CSSファイルやスタイルタグを頭に入れてみましたか？

<html> 
     <head> 
      <style type="text/css"> 
       .navbar { 
        margin-bottom: 0px; 
        clear: none; 
        background-color: white; 
        border-color: white; 
       } 
       .container { 
        margin-left: 0px; 
       } 
       .navbar-header img { 
        margin-right: 40px; 
        width: 130px; 
        height: 40px; 
       } 
       .navbar-left li { 
        padding-left: inherit; 
       } 
      </style> 
     </head> 
     <body> 
      <header> 
       <nav class="navbar navbar-default"> 
        <div class="container"> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 
          <img src="../../Images/Logo.png" /> 
         </div> 
         <div class="collapse navbar-collapse" id="myNavbar" > 
          <ul class="nav navbar-nav navbar-left"> 
           <li><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li> 
           <li><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li> 
           <li><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li> 
           <li><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li> 
           <li><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li> 
          </ul> 
         </div> 

        </div> 
       </nav> 
      </header> 
     </body> 
    </html>

また、リンクされたCSSシートがある場合は、ヘッダー内のクラスに適用されているスタイルを確認してください。要素のいくつかは、CSSスタイルに従って最初にレンダリングされ、次にインラインスタイルは要素がレンダリングされるときに上書きされます。

出典

2016-08-17 13:09:56

申し訳ありませんが、最初に置いてはいけません。はい、スタイルタグがあります。 Qを編集しました – Sak

問題の編集をご覧ください。ありがとう – Sak

私は、これはロングショットであるかもしれない知っているが、あなたは、ブートストラップの縮小さバージョンを使用してみてくださいとjquery.Justはそれを試してみると、私はは、これらを使用してみてください知らせることができます：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

出典

2016-08-30 08:10:49

問題の編集をご覧ください。おかげで – Sak

問題が来ているようです外部スタイルシートから。 LIの要素が縦に表示されている短期間に、私はまだ外部ファイルからCSSをロード中です。

ページのheadのstyle要素に次のCSSを追加しても問題は発生しませんか？

.navbar ul 
{ 
    list-style:none; 
} 

.navbar ul li 
{ 
    display:inline-block; 
} 

.navbar ul li a 
{ 
/* i have no idea if this is right. it is just an approximation. */ 
/* you will have to fiddle with it until it is right. */ 
    padding:10px 20px; 
}

（またはこのcodepenを参照）

出典

2016-08-30 08:22:21

私はそれらを頭の要素に入れてチェックし、助けてくれれば教えてくれます。 – Sak

無秩序リストはゆっくりとロードされ、1〜2秒間垂直に整列された後、水平に整列されますか？

答えて

関連する問題