CSS Divs不適合沒有邊框

我想要解決我的HTML/CSS錯誤。我有多個鏈接設置爲div。他們的寬度是10％。因此，所有10個div都適合父div。我希望鏈接（10 div）有一個邊界來區分它們。如果我嘗試添加邊框，最後一個div會跳出父div。有沒有辦法來解決這個問題？我嘗試使用溢出：汽車，沒有工作。大多數情況下，我希望找到一種方法來製作一個邊框，如果可能的話，就會進入div。CSS Divs不適合沒有邊框

body { 
    background-color: #574B59; 
} 
.header { 
    height: 87px; 
    width: auto; 
    border: 4px solid black; 
    margin: 20px; 
    background-color: white; 
    text-align:center; 
    font-size: 20px; 
} 
.links { 
    height: 25px; 
    width: auto; 
    border: 3px solid black; 
    margin: auto; 
} 
.body{ 
} 
.subheader{ 
} 
.linkss { 
    width: 10%; 
    height: 25px; 
    float: left; 
    text-align:center; 
    background-color:#06C; 
    border: 1px solid black; 
}

看.Linkss

來源

2014-01-10 user3183812

具有邊框的元素的框大小屬性 – mikevoermans

我看到多個人暗示框大小的屬性，但它不符合較舊的瀏覽器（IE7和更舊）。如果你不需要IE7的支持，那麼這是一個很好的解決方案！ – bboysupaman

可以通過邊框寬度（乘以2）來減小每個div的寬度，也可以使用1px模糊的box-shadow屬性應用假邊框。

box-shadow: 0px 0px 1px #000000;

來源

2014-01-10 23:51:05 bboysupaman

由於您使用的百分比寬度，box-shadow屬性可能是更好的方法。 =） – bboysupaman

你將如何實現這一點？編輯：非常好！謝謝！ – user3183812

沒問題！儘管它不是「真正的」邊界，但這個「僞邊界」看起來一樣好，並且不會破壞流體佈局。 =） – bboysupaman

的原因是10％，即使加上1px的邊界大於10％。因此，過大的10，以適應。一個簡單的解決方案，它在div內的某個東西上創建一個邊界，並使其填充整個父項。但是請張貼一些代碼，以便我們提供更好的解決方案。

來源

2014-01-10 23:50:12 Leeish

它添加到CSS的div的：

.linkss { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 10%; 
    height: 25px; 
    float: left; 
    text-align:center; 
    background-color:#06C; 
    border: 1px solid black; 
}

或者你可以設置width到calc(10% - 2px)。

來源

2014-01-10 23:53:23 knrz

.linkss { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    /* plus all your other properties here*/ 
}

來源

2014-01-10 23:54:02 mikevoermans

一種解決方案是設置1個像素的您linkss陰性切緣見下面的例子

.linkss { 
    margin: 0 -1px 0 -1px; 
    width: 10%; 
    height: 25px; 
    float: left; 
    text-align:center; 
    background-color:#06C; 
    border: 1px solid black; 
}

我已經在此之前，但有時做取決於你對你的佈局和設計，這可能需要一點點調整，讓我知道這是否有幫助。快樂的星期五！

來源

2014-01-10 23:56:02 Cam

像這樣的佈局問題的一個修復方法是將邊框應用於div內的元素，在您的情況下爲<a>元素。

.column_div{width:10%; float:left;} 
.column_div a{display:block; border:2px solid #f00;}

經過FireFox測試。

另一種解決方法是減少10％的寬度並將邊框作爲百分比寬度;但試圖讓它在頂部&底部相同將成爲一個令人頭疼的問題。

來源

2014-01-10 23:57:01 nightowl

CSS Divs不適合沒有邊框

回答

相關問題