3

私はulの下の境界線を持っています。リスト項目内にもリンクの下枠があります。リンクの境界線の位置を調整して、ul の境界線上に正確に配置したいので、次のようになります。

ここに画像の説明を入力

境界位置を設定できません。これが私のコードです：

HTML:

<ul>
    <li><a href="#" class="active">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
</ul>

CSS:

    ul{
    margin: 0;
    padding: 0;       
    list-style: none;
    overflow: hidden;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid green; 
}

ul li{
    float: left;   
    margin-right: 10px;
}

ul li a{
    text-decoration: none;
    display: block;
}

ul li a.active{
    border-bottom: 5px solid red;    
}

JSFiddle: http://jsfiddle.net/sZ8Gu/

4

6 に答える 6

1

padding-bottom:5px; を削除します。ul{} から取得し、それを ul li a{} に追加します。

以下のコードを参照してください。

ul{
    margin: 0;
    padding: 0;       
    list-style: none;
    overflow: hidden;
    margin-bottom: 5px;      
    border-bottom: 1px solid green; 
}

ul li{
    float: left;   
    margin-right: 10px;

}

ul li a{
    text-decoration: none;
    display: block;
    padding-bottom: 5px;
}

ul li a.active{
    border-bottom: 5px solid red; 

}
于 2013-05-20T12:14:26.330 に答える
1

padding-bottom を移動します: 5; 「ウル」から「ウルリア」へ

于 2013-05-20T12:14:27.110 に答える
1

私はあなたのコードをチェックしました。ul の padding-bottom を削除するだけです。次の css を使用すると、目的の外観が得られます。

ul{
    margin: 0;
    padding: 0;       
    list-style: none;
    overflow: hidden;
    margin-bottom: 5px;
    border-bottom: 1px solid green; 
}
ul li{
    float: left;   
    margin-right: 10px;
}
ul li a{
    text-decoration: none;
    display: block;
}
ul li a.active{
    border-bottom: 5px solid red;    
}
于 2013-05-20T12:17:38.200 に答える
1

働くフィドル

次のような小さな変更を加えました。

  • 削除されましたoverflow: hidden
  • float: leftに置き換えdisplay: inline-block
  • タグに追加position: relativeされました。a
  • タグの値bottomに対してマイナスの付加価値。bottom-bordera

働くフィドル

  • display: inline-blockレイアウト デザインで不要なスペースを避けるために、適用するタグ間のギャップを削除します。

このソリューションは、ulタグの高さが不明な場合にも機能します。

于 2013-05-20T12:32:53.653 に答える