Question

我无法想象这几天 - 当我调整窗口大小时，我的按钮移动并移动到他们想要的地方。但我希望他们留在原地。我浏览了很多文章，但似乎没有任何帮助。有人可以帮忙吗？

这是我整个导航的CSS代码：

#navigation li a {
    background: url(images/buttons.png) no-repeat;
}
#header {
    background: url(images/bg-header.png) no-repeat center top;
    height: 206px;
    text-align: right;
}
#header > div {
    margin: 0 auto;
    padding: 0 10px;
}

#logo {
    float: left;
    margin-left: 80px;
    margin-top: 10px;
    margin-right: 140px;
    border-style: none;
}
#navigation {
    float: left;
    list-style: none;
    display: inline-block;
    width: 610x; 
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;
    font-size: 13pt;
    height: 206px;
    width: 147px;
    margin-left: -25px;
    text-align: center;
}
#navigation li a {
    background-position: -144px 0;
    color: #e4dec0;
    display: block;
    font-family: 'Caudex-Regular';
    font-size: 14px;
    height: 206px; 
    width: 138px;
    line-height: 1.5em;
    outline: 0;
    text-decoration: none;
    text-shadow: 1px 1px #3d3413;
    text-transform: uppercase;
    padding-top: 65px;
}
#navigation li a:hover, #navigation li.selected a {
    background-position: 0 0;
    color: #fff;
}

这是HTML代码：

<div id="header">
        <div>
            <div id="logo">
                <a href="index.html"><img src="images/logo.png" border="0" alt="LOGO"></a>
            </div>
            <ul id="navigation">
                <li class="selected">
                    <a href="index.html">Tipogrāfijas grāmatiņas</a>
                </li>
                <li>
                    <a href="index2.html">Paštaisītās grāmatiņas</a>
                </li>
                <li>
                    <a href="content.html">Saturs</a>
                </li>
                <li>
                    <a href="gallery.html">Galerija</a>
                </li>
                <li>
                    <a href="orders.html">Pasūtījumiem</a>
                </li>
                <li>
                    <a href="contactform.html">Kontakti</a>
                </li>
            </ul>
        </div>
</div>

这是小提琴 - http://jsfiddle.net/simonapruse/rMxN4/

Answer 1

您只需要在其中一个包装器上设置宽度，这样容器就不会是视口的100％。＆＃34;

所以我在Header上设置了1000px的宽度

http://jsfiddle.net/rMxN4/1/

#header {
    background: url(images/bg-header.png) no-repeat center top;
    height: 206px;
    width:1000px;
    text-align: right;
}

调整窗口大小时，导航按钮移出位置

1 个答案: