CSS水平菜单

我遇到了这个水平菜单栏的问题。这是假设适合窗口（宽度明智），但继续比它应该进一步。它也被认为是top：0; left：0;CSS水平菜单

我所做的一切都是两件事情中的任何一件。要么我把它对齐左上角，但宽度太大，或者它没有对齐，宽度也不合适。

<!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>

来源

2013-03-23 John Doe

可能是边界。尝试使用'left：0; right：0;'而不是'width：100％' – Dave 2013-03-23 02:52:41

[让我把它放在你的jsfiddle中。]（http://jsfiddle.net/Zkvy9/） – meustrus 2013-03-23 02:55:00

时采取的边境进入帐户如果你不想使用CSS3属性box-sizing为Rockafella建议，可以尝试this edit of your CSS。

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

来源

2013-03-23 03:05:39 meustrus

谢谢！这工作！ – 2013-03-23 03:28:23

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

这告诉菜单计算“100％”

来源

2013-03-23 03:01:08 Rockafella

请注意，这是在旧IE（IE7或更早版本）中不支持，并且需要firefox中的供应商前缀和旧版本的chrome/safari。 http://caniuse.com/css3-boxsizing – Dave 2013-03-23 03:05:25

感谢您解释导致问题的原因！ – 2013-03-23 03:28:06

答案为止显得累赘，所以重新发布我的评论作为一个答案：

简单地改变width:100%到left:0;right:0在ul风格。这在比IE6更好的方面得到支持。如果您需要支持IE6，使用其expression语法：

width:expression((this.parentNode.offsetWidth-2)+'px')

来源

2013-03-23 03:10:27 Dave

添加overflow-x: hidden您body

来源

2013-03-23 03:29:14

这不是一个解决方案。 – Dave 2013-03-23 03:58:16

而不是使用一个边界，如何使用插图的box-shadow怎样的？你需要打开你的前缀，并且它在旧版IE中不起作用。就我而言，这个行业已经在老式的IE浏览器上转向了一个角落，并且明白，给它带来所有的阴影和圆角是不值得的。

box-shadow:inset 0 0 1px 0 #000;

来源

2013-03-23 03:36:11

'box-shadow：1px 1px＃000 inset，-1px -1px＃000 inset;' – 2013-03-23 03:51:08

@MattCoughlin其实'box-shadow：inset 0 0 0 1px＃000' better;有一个鲜为人知的第四个值，你可以在'box-shadow'中指定它来告诉它增长/缩小。 – Dave 2013-03-23 03:59:51

@Dave：很好的电话！没有想过要尝试第四个价值。这样更好！ – 2013-03-23 04:05:28

回答

相关问题