Question

我正在研究网站的css，我正在尝试确定导航菜单的最佳方法。菜单的布局如下：

enter image description here

第1列和第2列之间的

以及第2列和第3列之间是双垂直线，因为它们的样式可能需要是图像。

所以，我的问题是：

从语义上讲，所有这些链接都是一个无序导航列表的一部分。但是，我找不到任何方法来创建这样的列表使用只能在IE中工作的css。列表项之间的图像只会使它更加混乱。有干净的方法吗？

我的第二种方法是创建3列，并在col 1和col 3中放置一个列表。但是这仍然看起来像图像分隔符一样混乱。我想过使用li：放置图像之后，但是IE7无法识别“内容”属性。

现在，似乎最简洁的方法就是没有列表。但后来我觉得我失去了正确的语义。我有没有想到更好的方法？布局非常表格，所以我当然可以把它作为一个表格。。。：）

谢谢！

Answer 1

我认为您可以使用四个LI制作一个UL，并为第一个和最后一个li（可能是“事件”和“关于我们”）提供绝对位置。这可以通过伪选择器来实现：first-child和：last-child。

Answer 2

我解决了如下链接，你可以用你需要的名字和类图像替换图像和测量结果。

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

我希望我能提供帮助。问候。

带图像的3-col导航菜单

2 个答案: