0

Web サイトの CSS に取り組んでおり、ナビゲーション メニューの最適なアプローチを決定しようとしています。メニューのレイアウトは次のとおりです。

ここに画像の説明を入力

列 1 と 2 の間、および列 2 と 3 の間には二重の垂直線があり、そのスタイルのためにおそらく画像である必要があります。

だから、私の質問はこれです：

意味的には、これらのリンクはすべて、順序付けされていない 1 つのナビゲーション リストの一部です。しかし、IEで動作するcssのみを使用してそのようなリストを作成する方法が見つかりません。リストアイテム間の画像は、それをさらに混乱させるだけです。これを行うためのきれいな方法はありますか？

私の 2 番目のアプローチは、3 つの列を作成し、列 1 と列 3 にリストを配置することでした。画像を配置するためにli:afterを使用することを考えましたが、IE7は「コンテンツ」プロパティを認識しません。

現時点では、これを構築する最もクリーンな方法は、リストを使用しないことです。しかし、適切なセマンティクスを失っているように感じます。私が考えていないより良いアプローチはありますか？レイアウトは非常に表形式なので、確かに table にすることができます。. . : )

ありがとう！

4

2 に答える 2

0

必要な名前とクラスの画像を画像と測定値に置き換えるリンクについて、次のように解決しました。

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

お役に立てれば幸いです。挨拶。

于 2013-04-15T02:09:08.800 に答える
0

4 つの LI で 1 つの UL を作成し、最初と最後の li (おそらく「イベント」と「私たちについて」) に絶対的な位置付けを与えることができると思います。これは、疑似セレクター :first-child および :last-child によって実現できます。

于 2013-04-14T23:59:37.643 に答える