0

私がやろうとしているのは、左側に実線の境界線があり、各liの間に1または2ピクセルのスペースがある垂直リストがあることです。ボーダーが壊れてしまうので、margin-bottomは使えません。最終的には、左側（スペースなし）に単色のリストを作成しようとしています。個々のliにカーソルを合わせると、既存の境界線を越えて実際に左側に移動します。境界線の使用については設定していません。しかし、私はラッパーdivでそれをやろうとしましたが、正しく理解できないようですので、どんな提案も歓迎します:)ああ、垂直リストの高さが変わるので、divをリスト要素に自動化する高さがない背景は使用できません。作業リンクhttp://jsfiddle.net/hDHDF/があり、次のコードがあります。

<div id="menu">
<ul class="menu">
<li class="openmaincategory"><span><a href="#">###</a></span></li>
<ul class="categories">
<li class="subcategory"><span><a href="#">###</a></span></li>
<li class="subcategory"><span><a href="#">###</a></span></li>
<li class="subcategory"><span><a href="#">###</a></span></li>
</ul>
<li class="maincategory"><span><a href="#">###</a></span></li>

</ul>
</div>

および対応するcss：

#menu{
    position:absolute;
    right:0px;
    left:0px;
    top:120px;
    height:auto;
    width:190px;
    margin-top: 35px;
    margin-left:67px;
}
.menu {
    list-style-type:none;
    padding-right:10px;
    color:#6c6762;
}

.maincategory{
    background-color:#ada397;
    height:40px;
}
.openmaincategory{
    height:40px;
    background-color:#ada397;
}

.menu li a{
    display:inline-block;
    height:100%;
    width:100%;
}

.menu li{
    border-left:solid #6c6762 40px;
}

.menu li:hover{
    border-left:solid #6c6762 20px;
    padding-left:10px;
}

.menu span a{
    color:#5b5856;
    font-size:20px;
    padding-left:4px;
    padding-top:6px;
}

.menu a{
    text-transform:none;
    text-decoration:none;
    color:#6c6762;
}

.subcategory {
    background-color:#d7d1c9;
    height:40px;
}
4

3 に答える 3

2

マージンではなくパディングを使用したいようです。あなたのコードに基づいて、ここに例を設定します。

重要な部分は、サブカテゴリ クラスを li からスパンに移動し、.last を追加して、最終的な間隔を調整できるようにすることです。

.categories li span{
    background-color:#d7d1c9;
    height:40px;
    padding-top:2px;
}

.subcategory .last{
    padding-bottom:2px;
}

最後の li のアンカーのパディングで更新します。

于 2012-09-02T04:29:46.967 に答える
1

リスト項目ではなく、リスト自体に境界線を付けます。

于 2012-09-02T05:00:41.307 に答える
0

リスト自体に境界線を追加し、ホバー効果を margin-left:-20px にすることで修正しました。

于 2012-09-05T07:51:19.533 に答える