选项卡到css水平导航栏_Css_Navbar

选项卡到css水平导航栏

css

选项卡到css水平导航栏,css,navbar,Css,Navbar,我有一个水平菜单/导航栏，目前使用两行表格进行布局。它可以正常工作，但是如果可能的话，我想知道如何在不使用表的情况下创建它。我花了好几天的时间尝试各种div/span/uls float block/inline等，但都没有用。主要限制条件是： >IE7+，FF3+ >新的解决方案必须（对用户）在视觉和功能上保持不变。 >菜单项的宽度不尽相同，可能会发生变化。 >行高为26px，以容纳背景图像，提供“按钮”外观下面是一个使用表格的工作示例：那么，有什么建议吗？（或完整解决方案：）感谢您的帮助

我有一个水平菜单/导航栏，目前使用两行表格进行布局。它可以正常工作，但是如果可能的话，我想知道如何在不使用表的情况下创建它。我花了好几天的时间尝试各种div/span/uls float block/inline等，但都没有用。主要限制条件是：

>IE7+，FF3+
>新的解决方案必须（对用户）在视觉和功能上保持不变。
>菜单项的宽度不尽相同，可能会发生变化。
>行高为26px，以容纳背景图像，提供“按钮”外观

下面是一个使用表格的工作示例：

那么，有什么建议吗？（或完整解决方案：）感谢您的帮助

<!DOCTYPE HTML><html><head>
<title>Nav Bar Test</title>

<style>
body { font-family: arial; }

.page-wrapper {
   width: 850px; margin: auto; border: solid  02px  black; background: cyan;}

table.menu_bar {
   width    : 100%;
   font-size: .9em;
   border-style   : none;
   border-collapse: collapse;
   }

table.menu_bar td {
   background-color: white;
   border-width    : 1px;
   padding         : 0px;
   border-style    : solid;
   border-color    : #555;
   }

.menu_bar a {
   display          : block;
   height           : 26px;
   color            : black;
   text-align       : center;
   text-decoration  : none;
   background       : url(GRAY_bg1.PNG);
   background-repeat: repeat;
   background-color : silver;
   overflow         : hidden;
   }

.menu_bar a:hover {
   background: url(RED_bg1.PNG); background-color : red;}

.menu_bar a:active {
   background: url(RED_bg2.PNG); background-color : #F55;}

.menu_bar div { margin-top: 4px; }
</style>

</head>

<body><div class="page-wrapper"><br>

<table class="menu_bar" ><tr>
   <td><a href="#" class="menu_bar"><div>Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Very Long Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Long Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Item </div></a></td>
   <td><a href="#" class="menu_bar"><div>Menu Item</div></a></td>
</tr></table>

<br></div><!--End page-wrapper--></body></html>


导航条测试
正文{字体系列：arial；}
.页面包装器{
宽度：850px；边距：自动；边框：实心02px黑色；背景：青色；}
表.菜单栏{
宽度：100%；
字体大小：.9em；
边框样式：无；
边界塌陷：塌陷；
}
table.menu_bar td{
背景色：白色；
边框宽度：1px；
填充：0px；
边框样式：实心；
边框颜色：#555；
}
.菜单栏a{
显示：块；
高度：26px；
颜色：黑色；
文本对齐：居中；
文字装饰：无；
背景：url（GRAY_bg1.PNG）；
背景重复：重复；
背景颜色：银色；
溢出：隐藏；
}
.菜单栏a：悬停{
背景：url（RED_bg1.PNG）；背景颜色：RED；}
.菜单栏a：激活{
背景：url（RED#bg2.PNG）；背景颜色：#F55；}
.menu_bar div{margin top:4px；}

如果不是IE7，您可以使用

显示：表格/表格行/表格单元格

使任何元素充当表格。不幸的是，没有显示：如果不实际使用表格，很难完成您想要的内容

事实上，我很久以前就写过一个插件，它使浮动元素列表占据了其父元素的全部宽度：虽然它非常有限，可能无法与较新版本的jQuery一起使用。

这不是一个v'll“transform and give the code”站点！！谢谢你的回复。我假设我遗漏了一些明显的东西，我会得到很多“duh-just do this”类型的回答。然而，我想得越多，就越觉得使用表格是这种菜单栏最合适的解决方案。毕竟，列表只是一个简单的表<而且，在我的情况下，最重要的一点是：如果它没有坏，就不要修理它！