-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中背景颜色的十六进制代码不正确

您正在尝试浮动项目并绝对定位它们。选择一个或另一个。

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