代码之家 › 专栏 › 技术社区 › Akshay

无序列表加载缓慢,导致它垂直对齐1-2秒,然后水平对齐?

asp.net css html

0

Akshay · 技术社区 · 9 年前

我看到了这个帖子 Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds? 试过了,但没用。

在asp中使用它。net项目。地点主代码:

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

1-2秒后:

----------------------编辑从这里开始-----------------------

注意:没有使用引导css,对此非常抱歉。

好吧,所以我终于自己找到了问题。

试验:尝试了答案中提供的所有建议,谢谢大家,但他们没有帮助。

问题:我创建了一个没有内容的空aspx页面,并用母版页加载了它。我看到的是:

另一方面,当加载包含某些内容的页面时,它会将导航栏正确设置为如下所示,当加载“管理”页面时,导航栏为空1-2秒,当呈现时,它将设置正确的样式:

所以我做的是,我把下面的代码,使它不那么难看:(

li{
display: inline;
}

现在将显示如下:

伙计们,还有其他建议吗?

4 回复 | 直到 8 年前

1

Derek 9 年前

您的代码缺少包含Bootstrap的部分,这是重点。您的导航栏由Bootstrap设置样式,因此在加载Bootstrap's CSS文件之前不会设置样式。将引导CSS放入 <head> 页面的一部分 <link> 要素

<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/ 这是您的代码,其中包含Bootstrap的CSS文件 < 部分: https://jsfiddle.net/edaovwjt/

您正在使用Bootstrap中的类名(navbar navbar默认)。由于您没有任何CSS代码使navbar内联,当您最终获得预期结果时,这意味着加载了其他内容:这就是Bootstrap。

我认为您正在使用Ajax在页面中加载内容,加载的内容包含引导的CSS。这就是为什么您不知道自己正在使用它,以及为什么它在页面呈现后的某个时间被加载。

2

0

Lisa DeBruine 9 年前

你试过把样式放在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>

3

0

Gaurav Divate 9 年前

我知道这可能是一个很长的问题,但您可以尝试使用bootstrap和jquery的Minified版本吗。试试看,让我知道

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

4

0

Timothy Groote 9 年前

问题似乎来自外部样式表。在短期内 LI 元素是垂直显示的,我猜您仍然忙于从外部文件加载CSS。

如果将以下CSS添加到 style head

.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 )