我的導航列表項目搞砸

-3

嗨，我有這個網站：www.lifeofaris.se/tree在該斷點：最小寬度：到1600像素，我的導航列表項是不是「在線」，因爲兩個大字是獲得更多的空間，有沒有什麼辦法使所有對稱，而不與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>&copy; 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;} 
}

來源

2016-03-09 Aris Constantinou

請在此處添加有意義的代碼和問題描述。請不要鏈接到需要修復的網站 - 否則，一旦問題得到解決，或者您鏈接到的網站無法訪問，此問題將對未來的訪問者失去任何價值。發佈 [最小，完整和可驗證示例（MCVE）]（http://stackoverflow.com/help/mcve）顯示您的問題將幫助您獲得更好的答案。欲瞭解更多信息，請參閱 [我網站上的某些內容不起作用。我可以只粘貼一個鏈接嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

完成:)感謝提醒我 –

在你的情況下，簡單的解決方法是增加固定的高度。

nav li { 
    vertical-align: middle; 
    height: 75px; 
}

來源

2016-03-09 17:06:57 Merlin

它幫助了一點點:) http://www.lifeofaris.se/tree/ –

我的導航列表項目搞砸

回答

相關問題