0

私はナビゲーションに取り組んでいますが、下の境界線を下向きに拡大するのではなく、上向きにサイズを大きくする方法を理解できないようです (これにより、ヘッダーが数ピクセル拡張されます)。拡張ヘッダーを修正できます高さを設定しても、境界線は上ではなく下に伸びます。

CSS:

header {
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
  background: #000000;
}
ul {
  list-style-type: none;
  display: block;
  margin: 0 0 0 20px;
  padding: 0;
}
ul li {
  display: inline-block;
  padding: 0;
}
ul li a{
  display: block;
  border-bottom: 1px solid #fff;
  font-size: 19px;
}
ul li a:hover{
  border-bottom: 2px solid #fff;
  background: #333;
  font-size: 19px;
}

HTML:

<header>
  <ul id="nav">
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
    <li><a href="">link 3</a></li>
  </ul>
</header>

JSFiddle:

http://jsfiddle.net/Artsen/EZWvF/

4

2 に答える 2

0

Tyblitz が提案したように、:hover で追加のパディング値を使用すると、トランジションが必要ない場合にうまく機能します。

トランジションが必要で余分な div を導入したくない場合は、垂直方向の高さを制御するために line-height/height アプローチを使用して行うことができます。

これを行う代わりに：

.nav-element a {
  color: gray;
  padding: 25px 15px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;
}

これを行う：

.nav-element a {
  color: gray;
  padding: 0 15px;
  line-height: 70px;
  height: 70px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;
}

ここでは機能せず、機能する例を参照してください (行の高さ/高さを使用)ここ

于 2015-02-24T06:07:31.420 に答える