Question

我目前正在使用ASP.NET创建一个使用HTML5和CSS来设置样式的Web表单。我在site.master上用于导航栏的代码如下。

<body>
    <header>
        <div class="container">
            <img src="TGASlogo.png" alt="logo" class="logo">

            <nav>
                <ul>
                    <li><a href="~/Home Page.aspx">Home Page</a></li>
                    <li><a href="~/">About</a></li>
                    <li><a href="~/">Contact</a></li>
                    <li><a href="~/">List1</a></li>
                    <li><a href="~/">List2</a></li>
                    <li><a href="~/">List3</a></li>
                    <li><a href="~/">List4</a></li>
                    <li><a href="~/">List5</a></li>
                    <li><a href="~/Signup.aspx">Sign Up</a></li>
                    <li><a href="~/Login.aspx">Login</a></li>
                </ul>
            </nav>

        </div>
    </header>

        <div>

        </div>
</body>

，样式表如下。

body {
    padding-left: 500px;
    padding-right: 500px;
    margin: 0;
    background: #F0EFE8;
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
}

.container {
    width:80%;
    margin:0 auto;
}

header {
    background: #FFD63C;
}

header::after {
    content: '';
    display:table;
    clear:both;
}

.logo {
    float:left;
    padding:5px 0;
}

nav {
    float:right;
}

nav ul {
    margin:0;
    padding:0;
    list-style:none;
}

nav li {
    display:inline-block;
    margin-left:35px;
    padding-top:35px;

    position:relative;
}

nav a {
color:#444;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-weight:500;

}

nav a:hover {
    color:#FFF;

}

    nav a::before {
        content: '';
        display: block;
        height: 5px;
        background-color: #FFF;
        position: absolute;
        top: 0;
        width: 0%;
        transition:all ease-in-out 250ms;
    }

    nav a:hover::before{
        width:100%;
    }

我不确定为什么我的导航栏会随机被挤压，如所提供的屏幕截图所示。当人们改变浏览器窗口大小时，有什么方法可以让导航栏重新调整大小？

This is a screenshot of how the nav bar looks

我的导航栏正在压缩ASP.NET

0 个答案: