0

インライン ブロック li を含むナビゲーションがあります。各 li には 2 つのブロック スパン要素が含まれているため、ロールオーバー時にアニメーション化されます。私の問題は、li ナビゲーションの中央揃えと間隔にあります。li タグに最小幅を与えたくありません。誰でもこれを手伝ってもらえますか？

HTML:

<div id="nav">
    <ul>
        <li class="button">

                <a href="#">
                    <span class="top">Home</span>
                    <span class="bottom">Home</span>
                </a>

        </li>

        <li class="button"> 

                <a href="#">
                    <span class="top">About</span>
                    <span class="bottom">About</span>
                </a>

        </li>

        <li class="button">

                <a href="#">
                    <span class="top">Equine</span>
                    <span class="bottom">Equine</span>
                </a>

        </li>

        <li class="button">

                <a href="#">
                    <span class="top">Canine</span>
                    <span class="bottom">Canine</span>
                </a>

        </li>

        <li class="button">

                <a href="#">
                    <span class="top">Rates & Travel</span>
                    <span class="bottom">Rates & Travel</span>
                </a>

        </li>

        <li class="button">

                <a href="#">
                    <span class="top">Case Study & News</span>
                    <span class="bottom">Case Study & News</span>
                </a>
        </li>

</div> <!---nav---->

CSS:

#nav {
height: 25px;
border-top: 2px solid #FFFFFF;
border-bottom: 1px solid #C7C7C7;
padding: 10px 0px 5px 0px;
text-align: center;


}

#nav li{
height: 16px;
line-height: 15px;
overflow: hidden;
display: inline-block;
padding: 0px 25px 0px 25px;
position: relative;
}

li span.top {
color: #16528e;
top: -18px;

}

a:hover span {
top: 18px;
}
a:hover span.top {
top: 0;
}

li span {
display: block;
top: 0;
position: absolute;
  -webkit-transition: top 0.3s, border 0.3s, color 0.35s;
  -moz-transition: top 0.3s, border 0.3s, color 0.35s;
  -ms-transition: top 0.3s, border 0.3s, color 0.35s;
  -o-transition: top 0.3s, border 0.3s, color 0.35s;
  transition: top 0.3s, border 0.3s, color 0.35s;
}
4

1 に答える 1

0

が でこのposition:absolute問題を引き起こしていli spanます。それを削除する必要があり、topこの css にネガティブを適用することで効果が得られます。

例えば、

li span {

   display: block;
   position: relative;
   top: -15px;
  -webkit-transition: top 0.3s, border 0.3s, color 0.35s;
  -moz-transition: top 0.3s, border 0.3s, color 0.35s;
  -ms-transition: top 0.3s, border 0.3s, color 0.35s;
  -o-transition: top 0.3s, border 0.3s, color 0.35s;
  transition: top 0.3s, border 0.3s, color 0.35s;
}

これが解決策です。

お役に立てれば。

于 2013-05-23T11:35:05.290 に答える