包裹在较小的决议的导航栏 [英] nav bar wrapping on smaller resolutions

问题描述

我正在尝试使用HTML5 / CSS3作为学习过程，但我很难创建一个导航栏，用于链接到我的网页上的其他部分。
我修改了一个教程找到的代码，它的工作，但只有当观看分辨率1080p，如果宽度较小，条包装到其他行。

I'm trying my hand at HTML5/CSS3 as a learning process but I'm struggling to create a navigation bar for links to other sections across my pages. I adapted the code from a tutorial found and it works but only when viewed on a resolution of 1080p, if the width is smaller, the bar wraps onto other lines.

如何确保导航栏只占用一行（缩小到适合），无论用户使用的是什么分辨率？

How do I ensure that the nav bar only takes up one line (shrinks to fit) no matter what resolution the user is using?

这里是我的导航栏的CSS代码。请注意，在导航下，我将宽度设置为33.3％，填充到相同，以使按钮居中。我不知道这是否是原因。

Here is my CSS code for the nav bar. Please note, under nav i have set width to 33.3% and padding to the same in order to centre the buttons. I don't know if this is the cause.

nav {
    display:block;
    position: absolute;
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600;
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none;
    display: inline;
    white-space:nowrap; 
} 

nav ul li { 
    float: left;
    position: relative;
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px;
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757;
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px;
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
}


nav ul ul li a { 
    display: block;
    width: 200px;
    text-align: left;
    padding-left: 3px;
    font-size: 14px;    
}   



nav ul li:hover>ul{
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0;

}


nav ul li a:hover { 
    color: #fff;
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
}

推荐答案

你的css的问题是 white-space：nowrap; 只适用于 inline 元素 - code> float 。即使您为这样的元素设置 display：inline; 属性，浮动元素也会变为块级别（不会应用）。所以 - 如果你替换你的浮动与 display：inline-block; - 你的白空间属性将工作:)

You almost did it correctly. The problem with your css is that white-space: nowrap; only works for inline elements - but you are using float. Floated elements become block-level even if you set display: inline; property to such an element (it will not be applied). So - if you replace your floats with display: inline-block; - your white-space property will work :)

inline-block s和白色空格可以在这里看到： http://jsfiddle.net/skip405/wzgcH/

A live example of inline-blocks and white-space can be seen here: http://jsfiddle.net/skip405/wzgcH/

对于你的中心方法 - 有一个更好的解决方案。 （你可以删除 padding 并设置合适的宽度）特别是如果你使用内联块。只需在他们的父级上设置 text-align：center; 即可。

As for your centering method - there is a better solution. (You may remove the padding and set the proper width) Especially if you are using inline-blocks. Simply set text-align: center; on their parent - and you'll have it centered.

这篇关于包裹在较小的决议的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！