-1

浮きに少し問題あり。

リンクを 20px の余白で並べて表示する必要がありますが、うまくいきません。

CSS

ul li{
    float:left;
    display: inline-block;
    position:relative;
    padding:0 20px;
}
.link {
    font-family: Tahoma;
    font-size:18px;
    overflow: hidden;
    padding: 2px 0;
    position: absolute;
    cursor:pointer;
}
.link a{


    text-decoration:none;
    color:gray;
    -webkit-transition: color 0.4s ease;

}
.link span {
    position: inherit;
    left:-100%;
    bottom: 1px;
    height: 1px;
    width:100%;
    background: #fb6f5e;
    -webkit-transition:all 0.4s;
}
.link a:hover{
    color:#fb6f5e;

}
.link:hover span {
overflow:hidden;
position: inherit;
    bottom: 1px;
    left:100%;
    height: 1px;
    width:100%;
    background: #fb6f5ee;
   -webkit-transition:all 0.4s;

}

HTML

<ul>
<li><a href="#"><div class="link">Start</a><span></span></div></li>
<li><a href="#"><div class="link">About</a><span></span></div></li>
<li><a href="#"><div class="link">Other</a><span></span></div></li>
<li><a href="#"><div class="link">Contact</a><span></span></div></li>
</ul>

http://jsfiddle.net/SD58Z/727/

4

3 に答える 3

1

これでうまくいくはずです：

デモ

リンクは絶対位置に設定されているため、要素の流れの外側にありました。すべての要素が重なり合って終了したことを意味します。

また、いくつかの閉じられていない div タグやその他の html エラーも発生していました。

動作させるために、html内のいくつかを移動しました。これは最適化できると思います。下線のホバー効果が機能しなかった理由は、html 構造の変更が原因でした (最初に意図したものだと思います)。

CSS

ul{
    padding-left:0px;
}

ul li{
    float:left;
    display: block;
    margin-left:20px;
    position:relative;
    color:inherit;
}

ul li:first-child{
    margin-left:0px;
}
.link {
    font-family: Tahoma;
    font-size:18px;
     overflow:hidden;
    cursor:pointer;
}
.link a{
    text-decoration:none;
    color:gray;
    -webkit-transition: color 0.4s ease;
    position:relative;
   overflow:hidden;
}

.link a:hover{
    color:#fb6f5e;

}

.link span {
    position: absolute;
    left:-100%;
    bottom: 1px;
    height: 1px;
    width:100%;
    background: #fb6f5e;
    -webkit-transition:all 0.4s;
}

.link:hover span {
    bottom: 1px;
    left:0%;
    height: 1px;
    width:100%;
    background: #fb6f5ee;
   -webkit-transition:all 0.4s;

}

HTML:

<ul>
    <li>
        <div class="link">

            <a href="#">Start
                 <span></span>
            </a>
        </div>
    </li>
    <li>
        <div class="link">

            <a href="#">About
                 <span></span>
            </a>
        </div>
    </li>
    <li>
        <div class="link">

            <a href="#">Other
                 <span></span>
            </a>
        </div>
    </li>
    <li>
        <div class="link">

            <a href="#">Contact
                 <span></span>
            </a>
        </div>
    </li>
</ul>
于 2013-03-27T17:22:54.577 に答える
0

構文の問題が山ほどある

  1. 余分な</div>タグ
  2. タグの順序が正しくありません:<a><div></a></div>あるべきです<a><div></div></a>
  3. <span>CSSの背景色の 16 進コードが正しくありません

アイテムをフロートさせ、絶対位置に配置しようとしています。どちらかを選んでください。

この CSS を使用すると (2 行のコードを削除しました)、正常に動作します。

JSFIDDLE: http://jsfiddle.net/SD58Z/725/

ul li{
    float:left;
    display: inline-block;
    padding:0 20px;
}
.link {
    font-family: Tahoma;
    font-size:18px;
    overflow: hidden;
    padding: 2px 0;
    cursor:pointer;
}
.link a{


    text-decoration:none;
    color:gray;
    -webkit-transition: color 0.4s ease;

}
.link span {
    position: inherit;
    left:-100%;
    bottom: 1px;
    height: 1px;
    width:100%;
    background: #fb6f5e;
    -webkit-transition:all 0.4s;
}
.link a:hover{
    color:#fb6f5e;

}
.link:hover span {
overflow:hidden;
position: inherit;
    bottom: 1px;
    left:100%;
    height: 1px;
    width:100%;
    background: #fb6f5ee;
   -webkit-transition:all 0.4s;

}

HTML を修正した場合: http://jsfiddle.net/SD58Z/732/

于 2013-03-27T17:21:00.613 に答える
0

あなたのコードを少しいじって、HTML を修正しました。役に立たないCSSがいくつかあるようですが、これでうまくいきます。

HTML

<ul class="nav">
    <li><div class="link"><a href="#">Start</a><span></span></div></li>
    <li><div class="link"><a href="#">About</a><span></span></div></li>
    <li><div class="link"><a href="#">Other</a><span></span></div></li>
    <li><div class="link"><a href="#">Contact</a><span></span></div></li>
</ul>

CSS

#nav {
    width: 100%;
    display: block;
}
ul li{
    float:left;
    display: inline-block;
    padding:0 20px;
}
.link {
    font-family: Tahoma;
    font-size:18px;
    overflow: hidden;
    padding: 2px 0;
    cursor:pointer;
}
.link a{


    text-decoration:none;
    color:gray;
    -webkit-transition: color 0.4s ease;

}
.link span {
    position: inherit;
    left:-100%;
    bottom: 1px;
    height: 1px;
    width:100%;
    background: #fb6f5e;
    -webkit-transition:all 0.4s;
}
.link a:hover{
    color:#fb6f5e;

}
.link:hover span {
overflow:hidden;
position: inherit;
    bottom: 1px;
    left:100%;
    height: 1px;
    width:100%;
    background: #fb6f5ee;
   -webkit-transition:all 0.4s;

}
于 2013-03-27T17:25:40.107 に答える