当浏览器窗口重新调整大小时，导航栏按钮堆叠在彼此的顶部

当浏览器窗口重新调整大小时，此导航栏会重新排列，所有按钮都从一条水平直线延伸到堆叠在顶部因为窗户变得越来越小，所以一个接一个。如何设置它们以保持原位，并很好地粘贴到页眉徽标的底部，无论窗口大小如何？当浏览器窗口重新调整大小时，导航栏按钮堆叠在彼此的顶部

截图的问题： http://s29.postimg.org/3tnroxls7/Screenshot1.png

的目标截图： http://s24.postimg.org/vzuruvqb9/Screenshot2.png

body { 
 
    background-color: #FFFFFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 

 
header img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    border: 5px solid #0009bc; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a:link, a:visited { 
 
    display: block; 
 
    width: 139px; 
 
    font-weight: bold; 
 
    color: #20dbd4; 
 
    background-color: #000000; 
 
    text-align: center; 
 
    padding: 12px; 
 
    text-decoration: underline; 
 
    text-transform: uppercase; 
 
} 
 

 
a:hover, a:active { 
 
    background-color: #20dbd4; 
 
    color: #000000; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> 
 
<meta name="robots" content="noindex, nofollow, noarchive"/> 
 
<title>Grid Design</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/> 
 
    </header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">home</a></li> 
 
     <li><a href="#news">news</a></li> 
 
     <li><a href="#about">about</a></li> 
 
     <li><a href="#products">products</a></li> 
 
     <li><a href="#photos">photos</a></li> 
 
     <li><a href="#contact">contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

来源

2014-10-17 NightSpark

如果我说得对，您只是希望菜单保持相同的大小并保持一致，对不对？所以，你可以宽度只是添加到您的<ul>

ul { 
    list-style-type: none; 
    width: 978px; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: inline-block; 
    border: 5px solid #0009bc; 
}

见fiddle这里。

来源

2014-10-17 08:35:36 janatuerlich

非常好，谢谢。 – NightSpark 2014-10-17 08:45:40

当你谈论大小调整和respsonsivness你应该已经在百分比想着宽度。例如，你有6个li-s，你试图把它放在100％的宽度上......这意味着每个li应该有16.66％的宽度。从理论上讲，这应该很好地工作和包装，但由于空白，你的问题将持续存在。为了解决这个问题，你需要打空白。请参考此处：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

来源

2014-10-17 08:31:54 Gho

nav{ 

width: 1000px; 
margin: 0 auto; 
}

来源

2014-10-17 08:58:48 Narayana

当浏览器窗口重新调整大小时，导航栏按钮堆叠在彼此的顶部

回答

相关问题