調整邊界的位置

我有一個ul的底部邊界。列表項中還有底部的鏈接邊界。我想調整鏈路邊界的位置，使正是在UL邊界，所以它看起來是這樣的：調整邊界的位置

enter image description here

我無法設置邊框位置。這裏是我的代碼：

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/

來源

2013-05-20 user1251698

不知道這將是選項你，但刪除在overflow和給高度ul做這項工作。 jsfiddle

來源

2013-05-20 12:10:19 Morpheus

這裏是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;  
}

應用填充，並且評論溢出。這將創建你想要的。

希望這有助於。

來源

2013-05-20 12:13:54 Nitesh

我希望你對解決方案感到滿意。如果沒有，請讓我知道查詢 - @ user1251698 – Nitesh

刪除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-20 12:14:26 Salam

移動填充底：5;從「ul」到「ul li a」

來源

2013-05-20 12:14:27 alexb

我檢查了你的代碼。你只需要刪除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;  
}

來源

2013-05-20 12:17:38

Working Fiddle

我做了小改動，內容如下：