我的导航列表项目搞砸了
嗨，我有这个网站：www.lifeofaris.se/tree和断点：min-width：1600px，我的导航列表项目不是＆＃34;在行＆＃34;因为这两个大字的空间越来越大，有没有什么方法可以让所有对称而不会弄乱font-size属性？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/framework.css">
<link rel="stylesheet" href="css/responsive.css">
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>NK Electrical LTD</title>
</head>
<body>
<header>
<div class="logo">
<img src="img/nklogo.png" alt="NK Logo">
</div>
<h1 class="name">ELECTRICAL LTD</h1>
<div class="box">
<div class="info">
<p class="fb">Follow us on <a href="http://facebook.com/nkelectricalltd"><img src="img/fb.png" alt="Facebook Logo" class="social-icon"></a></p>
<p class="emergency">Emergency-call-number:2222222</p>
</div>
</div>
<a id="i-nav" href="#"></a>
<nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="electrical.html">Electrical Installations</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="appliances.html">Home Appliances</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="slider">
<a href="img/wormhole.jpg">
<img src="img/wormhole.jpg" alt="slider">
</a>
</div>
<section class="boxes">
<ul id="gallery">
<li>
<a href="img/electrical.png">
<img src="img/electrical.png" alt="">
<p>Electrical Installations</p>
</a>
</li>
<li>
<a href="img/lighting.png">
<img src="img/lighting.png" alt="">
<p>Lighting Decorations</p>
</a>
</li>
<li>
<a href="img/homeappliances1.png">
<img src="img/homeappliances1.png" alt="">
<p>Electrical Appliances</p>
</a>
</li>
<li>
<a href="img/homeappliances2.png">
<img src="img/homeappliances2.png" alt="">
<p>Kitchen Appliances</p>
</a>
</li>
</ul>
</section>
<section class="latest">
<h1>Our latest products</h1>
<ul id="galleryproducts">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt="">
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
</a>
</li>
</ul>
</section>
</div>
<footer>
<p>© NK ELECTRICAL LTD 2016</p>
</footer>
</body>
</html>
Framework.css /主
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
body{font-family: 'Electrolize', sans-serif;}
.container{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
overflow: hidden;
}
a{text-decoration: none;}
header{
margin: 0 0 1% 0;
padding: 5px 0 0 0;
width: 100%;
text-align: center;
}
.logo{text-align: center;padding:0;width:50%;margin:0 auto;}
.logo img{width:50%}
nav{
display: none;
text-align: center;
padding: 1%;
background-color: #1c1c1c;
}
nav ul {
list-style: none;
margin: 0% 2%;
}
nav li {
background-color: #656565;
margin:5% 0% 5% 0%;
display: block;
}
nav a {
display: block;
color:white;
font-size:1.2em;
font-weight: 800;
padding: 5% 10%;
}
.slider{width:100%;padding: 0;margin: 0 auto;}
#gallery {
display: inline-block;
margin: 0% -2.7% 0% -2.7%;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #1c1c1c;
color: #bdc3c7;
}
#gallery li:nth-child(3n) {clear: left;}
#gallery li a p {
margin: 0;
padding: 6%;
font-size: 1.25em;
background-color: #483636;
color: #bdc3c7;
text-align:center;
}
#gallery img{max-width: 100%; padding:10%;}
#galleryproducts{
display: inline-block;
margin:0;
padding:0;
list-style: none;
}
#galleryproducts li{
float:left;
width:30%;
margin:0 10% 2% 10%;
}
#galleryproducts li:nth-child(3n) {
clear: both;
}
.logo img{width:100%;max-width:120px;}
.latest{clear:both;background-color:#1c1c1c;}
.latest h1{color: white;font-size:1.5em;font-weight: 300;border-bottom: 3px solid white;margin-bottom: 5%;padding:2%;}
.latest img{max-width: 100%;}
#galleryproducts img{border:3px solid white;}
.slider{clear:both;}
.slider img{max-width: 100%;}
footer{clear:both;text-align: center; margin-top:5%;padding:3.1%;background-color:#1c1c1c;}
footer p{color:white;font-size:0.8em;font-weight: 900;}
.name{font-size: 1.3em;font-weight: 900;margin-bottom: 10%;text-align: center;}
.info{background-image: url(../img/image.png); text-align: center;color:white;}
.fb{font-size:1.3em;}
.fb img {width:8%;}
.emergency{font-size:1.3em;padding:5%;}
.show{margin-top:3%;display: block !important;}
#i-nav{
cursor: pointer;
margin:0 auto;
margin-top:5%;
display: block;
text-align: center;
width:44px;
height:44px;
background-image: url("../img/ham.png");
background-repeat: no-repeat;
background-size: 100% 100%}
Responsive.css
@media screen and (min-width: 798px) {
.container{max-width: 990px;}
.box{float:right;position: relative;}
.logo{clear: both;}
.logo img{width:100%; max-width:92px;}
#i-nav{
display: none;
}
nav{
clear: both;
display: block;
}
nav ul{
padding:0;
margin:0 auto;
}
nav li{
display: inline-block;
width:350px;
margin:1% 2% 1% 2%;
}
nav a{
font-size: 1.3em;
padding:10%;
}
.logo{float:left;width:500px;height:0px;}
.name{clear: both;margin:0;height:0px;}
.info {background-image: url(../img/social.png);background-repeat: no-repeat; display: inline-block;width:529px;padding-top: 11%; padding-bottom: 11%;}
.fb img{width:15%;}
.box{position: relative;}
.fb, .emergency{position: absolute;top:36px;right:1px;}
.emergency{margin-top:3%;}
.slider{max-width: 85%;}
#gallery{max-width:100%;margin:0 auto;}
#gallery li{width:40%;margin-right:-20px;margin-left: 65px;}
.boxes{margin-top: -1%}
.latest{max-width:85%;margin:0 auto;}
footer p{font-size: 1.2em;}
}
@media screen and (min-width: 1290px) { /*Desktop Version*/
.container{max-width:1200px;}
.box{width:609px;}
#i-nav{
display: none;
}
nav{
}
nav ul{
padding:0%;
}
nav li{
display: inline-block;
margin:0% 0.9% 0% 0.1%;
padding:0;
width:15%;
}
nav a{
font-size:1em;
padding:11%;
}
.name{margin: 0;}
.info {
display: inline-block;
width: 530px;
margin-top: 0;
margin-right: 5%;
padding: 5% 0% 13% 10%;
}
.fb, .emergency{float: right;top:28px;}
.slider{max-width:100%;margin-top: 1%;}
.boxes{max-width:100%;}
#gallery{}
#gallery li{margin-left:0;width:18%;margin-right:0.9%;float:none;display:inline-block;width:24%;}
#gallery li:nth-child(4n) {margin:0;}
.latest{max-width:100%;margin-left:0%;,margin-right:0%;padding-bottom: 4%;}
#galleryproducts li{float:none;width:18%;display: inline-block;margin:2.3%;}
#galleryproducts li:nth-child(1n) {margin-left:4%;}
footer p{font-size: 1.2em;}
} @media screen and (min-width: 1600px){
header{width:1009px;margin:0 auto;}
.logo img{float:left;width:400px;margin-top:2%;}
.name{float:left; margin-top: 6.5%;
margin-left: 9%;}
.info{ width:500px;float:right;margin:0 auto}
nav ul{padding:0%;}
nav li{display: inline-block;margin: 0% 0.9% 0% 0.1%;
padding:1%;
width: 15%;}
nav a{font-size:1em;}
footer p{font-size: 1.2em;}
}
答案 0 :(得分：1)
在您的情况下，简单的解决方法是添加固定高度。
nav li {
vertical-align: middle;
height: 75px;
}