css浮动问题

这应该可以做到:

Demo

你的链接被设置为绝对位置,所以它在元素流之外。意味着所有元素都在彼此之上结束。

您还遇到了一些未关闭的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>

你有很多语法问题

1. 额外的 </div> 标签
2. 标签顺序不正确: <a><div></a></div> 应该是 <a><div></div></a>
3. 上背景颜色的十六进制代码不正确 <span> 在CSS中

您正在尝试浮动项目,并对其进行绝对定位。选择一个或另一个。

使用这个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/

我只是玩了你的代码一分钟,并修复了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;

}