我正在为一个网站设计 CSS，并试图确定导航菜单的最佳方法。菜单布局如下:
第 1 列和第 2 列之间以及第 2 列和第 3 列之间是双垂直线，由于它们的样式，可能需要是图像。
所以，我的问题是:
从语义上讲，所有这些链接都是一个无序导航列表的一部分。但是，我找不到任何方法来仅使用可在 IE 中使用的 css 创建这样的列表。列表项之间的图像只会使它更加困惑。有没有一种干净的方法可以做到这一点？
我的第二种方法是创建 3 列，并在第 1 列和第 3 列中放置一个列表。但这对于图像分隔线来说似乎仍然很困惑。我考虑过使用 li:after 来放置图像，但 IE7 无法识别“content”属性。
目前，构建它的最简洁方法似乎是不使用列表。但后来我觉得我失去了正确的语义。有没有我没有想到的更好的方法？布局非常表格化，所以我当然可以将其设为表格。 . . :)
谢谢!
最佳答案
我解决了如下链接问题，您可以在其中用图像和测量值替换所需的名称和类图像。
<style type="text/css">
ul{
width:400px;
height:200px;
}
ul li{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
height:99x;
width:100px;
}
.left{
float:left;
}
.right{
float:right;
}
.second{
margin-top:100px;
margin-left:-100px;
}
.image{
background:red;
border-left:3px double gray;
border-right:3px double gray;
display:block;
float:left;
height:200px;
width:194px;}
</style>
<body>
<ul>
<li class="left"><a href="#">Home</a></li>
<li class="left second"><a href="#">Home</a></li>
<li class="image"><a href="#">Home</a></li>
<li class="right second"><a href="#">Home</a></li>
<li class="right"><a href="#">Home</a></li>
</ul>
<body>
希望能帮到你。一句问候。
关于css - 带图像的 3 列导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16005505/