相关疑难解决方法(0)

我正在尝试将HTML5/CSS3作为学习过程,但我正在努力创建一个导航栏,用于指向我页面中其他部分的链接.我根据找到的教程调整了代码,但只有在1080p分辨率下才能使用,如果宽度较小,则条形图会覆盖其他线条.

无论用户使用什么分辨率,我如何确保导航栏只占用一行(缩小到适合)？

这是导航栏的CSS代码.请注意,在导航下我将宽度设置为33.3%并填充相同以使按钮居中.我不知道这是不是原因.

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; …

当我将窗口滚动到水平然后页脚和标题中断时,我正面临这个问题.

请帮助CSS

你可以在这里查看现场演示http://yeszindagi.com/

    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:1.3em;
        min-height:100%;
    }


    .containerMain {
        min-height:100%;    
        width: 100%;
    }


    .full {
    width:100%;
    }

    .fixed {
    width:900px;    
    }


    .footer {
        border-top:1px dashed #000;
        margin-top:5px;
        height:50px;
        background-color:#F7B200;
        bottom:0px;
        position:relative;
    }

---------------------------- HTML CODE -------------------- --------------------

    <div class="containerMain">
    ....
    .....
    .........
    <div class="full footer clear ">
        <div class="fixed center">
            <div class="left">
                <ul class="links">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>    
            <div class="social right">
                <a href="#" target="_blank" title="Facebook"><span class="facebook-mini"></span></a> …

我不知道我以前在哪里看过这个,但我确信有一种方法可以进行水平滚动.

可以说,例如你有多个DIV是ff:结构:

<div class="container">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
</div>

我正在寻找一种方法使其水平对齐,而不会破坏下一行.并且会有一个水平滚动而不是垂直滚动.

通常情况下,如果我做了一个浮动:左边或显示:内联,在div填充足够的水平空间后,它将转到下一行.反正有没有让它在一条直线水平线上对齐并为此做一个h-scroll？