1

ページを拡大または縮小すると、最後の 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;
            }
4

1 に答える 1

0

#navで幅を指定すると、デフォルトでdivがウィンドウの最後まで伸びるので、折り返しを回避できます。＆nbsp;も使用 間隔を空けることは一般的に悪い考えです。代わりに、cssマージンまたはパディングを使用してください。

この記事をチェックしてください、それはあなたを助けるかもしれません。

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

于 2012-06-28T02:49:27.300 に答える