Question

每当我放大或缩小页面时，最后一个li向右移动然后向下移动。我希望它在缩放时保持相同的位置。我是html / css的新手，我真的不知道应该尝试做些什么。

<html>
<head>
    <title>Delta Aluminum</title>
    <link rel=stylesheet href="/css/style.css" type="text/css"/>
</head>
<body>
    <div id="page">
        <div id="header">
            <div id="logo">
                <a href="/"><img src="/images/logogrey.png"></a>
            </div>
            <div id="nav">
                <ul>
                    <li id="home"><a href="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                    <li id="services"><a href="/services/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Services&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                    <li id="photo"><a href="/gallery/">&nbsp;&nbsp;&nbsp;Photo Gallery&nbsp;&nbsp;&nbsp;</a></li>
                    <li id="glossary"><a href="/glossary/">Glossary of Terms</a></li>
                    <li id="about"><a href="/about/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About Us&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                    <li id="contact"><a href="/contact/">&nbsp;&nbsp;&nbsp;&nbsp;Contact Us&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                </ul>   
            </div>
        </div>
        <div id="banner">
            <img src="/images/imgmain.jpg">
        </div>
        <div id="content">
            <h2>Welcome to Delta Aluminum!</h2>
            <h3>Professional Installation</h3>
            <h3>Over fifteen years of experience and over 7000 homes installed in the Greater Toronto Area</h3>
            <ul>
                <li>Soffit and fascia (aluminum and copper)</li>
                <li>5" and 6" eavestrough and downspouts (aluminum and copper)</li>
                <li>Half-round eavestrough and round downspouts (aluminum and copper)</li>
                <li>Siding (vinyl and aluminum) </li>
                <li>Copper and metal roofs</li>
            </ul>
            <img src="/images/contentimg.jpg">
        </div>
        <div id="footer">
            <p>&copy; 2012&nbsp;Delta Aluminum D Inc.</p>
        </div>
    </div>
</body>

    #nav{
    display: inline-block;
}
    #nav ul{
        margin-left:-40px;  
}
        #nav ul li{
            padding: 7px 0px 12px 0px;
            display: inline;
        }
            #nav ul li a{
                padding: 7px 30px;
                color: #444;
            }
            #nav ul li a:hover{
                padding: 7px 30px 11px 30px;
                background-color: white;
                color: black;
            }
            #nav ul li a:active{
                padding: 7px 30px;
                background-color: white;
                color: black;
            }

Answer 1

在#nav上指定宽度将避免包装，因为默认情况下div将延伸到窗口的末尾。还使用＆amp; nbsp;间距通常是一个坏主意。请改用css边距或填充。

查看此文章，它可能会帮助您。

http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

我缩放时导航栏移动

1 个答案: