3

我有一个 ul 的底部边框。列表项内也有链接的底部边框。我想调整链接边框的位置，使其正好在ul边框上，使它看起来像这样：

在此处输入图像描述

我无法设置边界位置。这是我的代码：

HTML：

<ul>
    <li><a href="#" class="active">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
</ul>

CSS：

    ul{
    margin: 0;
    padding: 0;       
    list-style: none;
    overflow: hidden;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid green; 
}

ul li{
    float: left;   
    margin-right: 10px;
}

ul li a{
    text-decoration: none;
    display: block;
}

ul li a.active{
    border-bottom: 5px solid red;    
}

JSFiddle：http: //jsfiddle.net/sZ8Gu/

4

6 回答 6

6

不知道这是否适合您，但移除overflow并给予高度来ul完成这项工作。jsfiddle

于 2013-05-20T12:10:19.370 回答
1

这是解决方案。

的HTML：

<ul>
    <li><a href="#" class="active">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
</ul>

CSS：

ul{
    margin: 0;    
    list-style: none;    
    margin-bottom: 5px;
    padding: 0 0 22px;
    border-bottom: 1px solid green; 
}

ul li{
    float: left;   
    margin-right: 10px;
}

ul li a{
    text-decoration: none;
    display: block;
    color:#000000;
}

ul li a.active{
    border-bottom: 5px solid red;    
}

应用填充并评论溢出。这将创建您想要的。

希望这可以帮助。

于 2013-05-20T12:13:54.623 回答
1

移除 padding-bottom:5px; 来自 ul{} 并将其添加到 ul li a{} 中。

请看下面的代码：

ul{
    margin: 0;
    padding: 0;       
    list-style: none;
    overflow: hidden;
    margin-bottom: 5px;      
    border-bottom: 1px solid green; 
}

ul li{
    float: left;   
    margin-right: 10px;

}

ul li a{
    text-decoration: none;
    display: block;
    padding-bottom: 5px;
}

ul li a.active{
    border-bottom: 5px solid red; 

}
于 2013-05-20T12:14:26.330 回答
1

移动 padding-bottom: 5; 从“ul”到“ul li a”

于 2013-05-20T12:14:27.110 回答
1

工作小提琴

我做了一些小的改动，如下所示：

  • 已移除overflow: hidden
  • 替换float: left为display: inline-block
  • 添加position: relative到a标签。
  • bottom相对于标签bottom-border值的负值附加值。a

工作小提琴

  • 删除您要应用的标签之间的间隙，display: inline-block以避免布局设计中出现不必要的空间。

ul如果标签的高度未知，此解决方案也将起作用。

于 2013-05-20T12:32:53.653 回答
1

我检查了你的代码。您只需要删除 ul 的 padding-bottom。请使用以下 css，它将为您提供所需的外观：

ul{
    margin: 0;
    padding: 0;       
    list-style: none;
    overflow: hidden;
    margin-bottom: 5px;
    border-bottom: 1px solid green; 
}
ul li{
    float: left;   
    margin-right: 10px;
}
ul li a{
    text-decoration: none;
    display: block;
}
ul li a.active{
    border-bottom: 5px solid red;    
}
于 2013-05-20T12:17:38.200 回答