您如何优化导航栏以调整大小？答案

【问题标题】：How do you optimize navigation bar for resizing?您如何优化导航栏以调整大小？
【发布时间】：2014-02-14 23:33:30
【问题描述】：

我大约 6 天前才开始学习 html 和 css。我每天做一个小时，我玩得很开心。我试图自己解决大部分问题，但我一直无法找到解决此问题的资源。

@import url(http://fonts.googleapis.com/css?family=Merriweather);

*
{
    text-decoration: none;
    box-sizing: border-box;
}

body
{
    background-color: #ff9900;
    font-family: 'Merriweather', serif;
}

#page
{
    margin: -8px;
}

#wrapper
{
    /*margin: 1px;*/
}

h2>a 
{
    margin: -25px;
    float: left;
    background-color: #ffde00;
    color: #097054;
    padding: 20px;
}

h2>a:hover 
{
    color: #ffde00;
    transition: .5s ease;
    background-color: #6599ff;
}

.container
{
    padding: 6px;
    padding-right: 50px;
    padding-left: 20px;
    text-align: center;
    background-color: #097054;
}

ul li
{
    background-color: #ffde00;
    display: inline;
    margin: 0 auto;
    padding: 10px;
    color: #097054;
    font-weight: 900;
    font-size: 14pt;
}


ul li:hover
{
    transition: .5s ease;
    background-color: #097054;
    border-color: #25C1BC;
    color: #ffde00;

}

#p1
{
    color: #097054;
    height: 25em;
    width: 25em;
    background-color: #097054;
    margin-left: 8px;
    margin-top: 20px;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
}

p
{
    background-color: #ffde00;
    padding: 20px;
    margin-top: 8px;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
}

#p1:hover;
{
    /*background-color: #000000;*/
}

p:hover
{
    height: -75%;
    width: -75%;
    padding-bottom: 3.8em;
    box-shadow: -5px -5px 0px 0px #097054;
    margin-top: 3em;
    color: #ffde00;
    background-color: #6599ff;
    font-weight: 600;
}

基本上发生的情况是我的导航栏在调整大小后会变得非常混乱。这会导致链接重叠并且看起来非常糟糕。

感谢您的时间和考虑。

http://jsfiddle.net/JZ9LZ/

【问题讨论】：

标签： css html resize navbar nav

【解决方案1】：

添加此.container{white-space: nowrap;} 这个问题在Disable line breaks using CSS之前有人问过

【讨论】：

【解决方案2】：

只有 html/css 无法解决您的问题，因为您的 li 元素的宽度是最小的。

你应该减少文本字体大小计算它的窗口宽度，但这只能用javascript来做

我的建议是像以前一样离开这个页面（我想这只是为了好玩），当你有良好的 html/css 技能时，你可以开始学习 jQuery

【讨论】：