调整边框的位置

Question

我有一个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/

Answer 1

不知道这是否适合您，但删除overflow并为ul提供高度可以胜任。 jsfiddle

Answer 2

这是Solution。

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;    
}

应用填充并注释溢出。这将创造你想要的东西。

希望这有助于。

Answer 3

删除填充底部：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; 

}

Answer 4

移动填充底部：5;从“ul”到“ul li a”

Answer 5

我检查了你的代码。你只需要删除ul的填充底部。请使用以下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;    
}

Answer 6

Working Fiddle

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

• 已移除overflow: hidden
• 用float: left
替换display: inline-block
• 将position: relative添加到a代码。
• 针对bottom代码的bottom-border值添加了a值为负数。

Working Fiddle

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

如果ul标记的高度未知，此解决方案也可以使用。