调整窗口大小时停止移动文本

时间:2015-02-11 18:18:43

标签: html css

当我调整窗口大小时,所有元素都会移动,我希望它们保持在正确的位置。我怎么做?我需要将它们放在包装物中吗?

HTML -

<div id="menu">
    <div class="table">
        <ul id="horizontal-list">
            <li><a href="index.html" class="no-underline" >Home</a></li>
            <li><a href="page2.html" class="no-underline" >All About</a></li>
            <li><a href="page3.html" class="no-underline" >Galley</a></li>
            <li><a href="page4.html" class="no-underline" >Video Clips</a></li>
            <li><a href="page5.html" class="no-underline" >Main Cast</a></li>
        </ul>   
    </div>  
</div>

CSS -

#menu-outer {
    height: 84px;
    text-align: center;
    position: fixed;
}

.menu {
    display: table;
    position: fixed;
}

ul#horizontal-list {
    min-width: 700px;
    list-style: none;
    padding-top: 20px;
    text-align: center;
    padding-left: 50px;
}

ul#horizontal-list li {
    display: inline;
    padding-right: 50px;
}

1 个答案:

答案 0 :(得分:0)

我注意到你在CSS中有这个。

.menu {
    display: table;
    position: fixed;
}

它应该是#menu,以便匹配标记吗?

#menu {
    display: table;
    position: fixed;
}

演示http://jsfiddle.net/60admLna/