我目前正在开发一个Web表单项目并创建了一个导航栏。我想知道我需要做些什么才能使导航栏响应，这样当窗口大小重新调整时，导航栏会相应改变，而不是一起压扁。
我使用的代码如下：
Master.site页面
<%@ Master Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="NestedMasterPage1.master.cs" Inherits="TGASAttempt.NestedMasterPage1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" runat="server" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<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>
</html>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ContentPlaceHolder ID="nestedContent" runat="server">
</asp:ContentPlaceHolder>
</asp:Content>
stylesheet.css中
body {
padding-left:200px;
padding-right:200px;
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%;
}
我认为@media查询是您正在寻找的。
@media screen and (max-width: 720px){
nav {
// this styling will have affect when user is using screen with 720px or lower width
}
}
您可以尝试下载任何免费的响应主题，并尝试将它们集成到您的代码中。使用现成主题比使用快速解决方法更好。