1

我遇到了这个水平菜单栏的问题。假设它适合窗口（宽度方向），但比它应该继续的更远一点。它也应该是 top:0;left:0;

我做的每件事中的任何一件都有效。要么我将它对齐左上角但宽度太大，要么它没有对齐并且宽度适合。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Website Title</title>
    </head>
    <body>
    <style>
    body{
    }

    .bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5000;
    }
    #cssmenu ul {
        list-style-type:none;
        width:100%;
        position:absolute;
        display:block;
        height:33px;
        font-size:.6em;
        background: #76B3F1 url(images/menu-bg.png) repeat-x top left;
        font-family:Verdana,Helvetica,Arial,sans-serif;
        border:1px solid #000;
        margin:0;
        padding:0;
        top:0;
        left:0;
    }

    #cssmenu li {
        display:block;
        float:left;
        margin:0;
        padding:0;
    }

    #cssmenu li a {
        float:left;
        color:#A79787;
        text-decoration:none;
        height:24px;
        padding:9px 15px 0;
        font-weight:normal;
    }

    #cssmenu li a:hover,.current {
        color:#fff;
        background: #A3BAE6 url(images/menu-bg.png) repeat-x top left;
        text-decoration:none;
    }

    #cssmenu .current a {
        color:#fff;
        font-weight:700;
    }
    </style>

    <div id="cssmenu">
        <ul>
           <li class='active '><a href='#'><span>Home</span></a></li>
           <li><a href='#'><span>Products</span></a></li>
           <li><a href='#'><span>Company</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>

    </div>
    <div id="background">
        <img src="background/001.JPG" class="bg"/>
    </div>


    </body>
    </html>
4

5 回答 5

2

添加box-sizing: border-box;css 属性。

这告诉菜单在计算“100%”时考虑边框

于 2013-03-23T03:01:08.627 回答
2

到目前为止的答案似乎很麻烦，所以重新发布我的评论作为答案：

只需将样式更改width:100%为。比 IE6 更好的一切都支持这一点。如果您需要支持 IE6，请使用其语法：left:0;right:0ulexpression

width:expression((this.parentNode.offsetWidth-2)+'px')
于 2013-03-23T03:10:27.477 回答
0

如果您不想像box-sizingRockafella 建议的那样使用 CSS3 属性，您可以尝试对您的 CSS 进行此编辑。

我摆脱了您的，为容器position: absolute添加了1px填充，并为. 这样，on会使内容框的宽度不包括您指定的 1px 边框。<div>-1px<ul>width: 100%<ul>

于 2013-03-23T03:05:39.803 回答
0

添加overflow-x: hidden到您的body

于 2013-03-23T03:29:14.550 回答
0

不使用边框，使用插入框阴影怎么样？你需要打开你的前缀，它在旧的 IE 中不起作用。就我而言，业界已经在旧版 IE 上转了个弯，并且明白给它所有的阴影和圆角是不值得的。

box-shadow:inset 0 0 1px 0 #000;
于 2013-03-23T03:36:11.550 回答