1

上下に1pxの区切り記号が付いた、インラインの順序付けられていないリストを含むメニューバーを作成しています。行が1行しかない場合は、これで問題ありません。

2行（またはそれ以上）のリンクに到達したら、最初の（2番目の）行の下に3番目の区切り文字を配置したいのですが、一生の間それを解決することはできません。

私が持っていた唯一の考えは、線と透明なスペースのある背景画像を使用することでした。これは、複数の線にプッシュされるとタイル状になりますが、もっと良い方法が必要です。

どんな助けでも大歓迎です！

編集：

すべての画像が1つに埋め込まれています。1.これは、リンクが1行しかない場合の現在の大まかな外観です。2.これは、複数の行に分割したときに得られるものです。3.あなたがそれを必要としているかのように..これは私が達成したいことです。liの各行の後に追加の区切り文字を取得するには：

リンクについて申し訳ありません。現在、画像を埋め込むことは許可されていません。すべての画像を1つに。2つ以上のハイパーリンクを投稿することはできません。

4

1 に答える 1

0

方法は次のとおりです。インライン ブロックを使用すると、LI と UL の境界線を揃えるにはリンクを同じ幅にする必要があるため、少し難しくなります。

<div class="menu">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>

CSS:

.menu ul, .menu li {
    margin:0;
    padding:0;
    font-size: 0;
    list-style:none
}

.menu li {
    display:inline-block;
    border-bottom:1px solid #0000cc;
}

.menu a {
    display:block;
    padding:5px;
    margin:0;
    text-decoration:none;
    min-width:63px;
    font-size:16px;    
}    

.menu ul {
    width:220px;
    margin-top:5px;
    padding-bottom:1px;
    border-top:1px solid #002080;
    border-bottom:1px solid #002080;
}
于 2013-01-23T15:59:55.097 に答える