CSS計算不準確

我有一個ul元素和5個孩子<li>。CSS計算不準確

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

的<ul>有display: flex屬性。我嘗試使用鈣財產上<li>均勻大小我的列表項：

calc:(100%/5);

這給了期望的結果和均勻大小的5 <li>塊

現在我添加邊框，所有的右側，但最後一個孩子<li>元素。所以我從<ul>的總寬度減少了所有邊界的總寬度。

calc:((100% - 8px)/5);

這也可以正常工作並且將<li>塊與邊界大小均勻一致。

ul { 
 
    width: 600px; 
 
    height: 300px; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    background: red; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    display: block; 
 
    width: calc((100% - 0.8px)/5); 
 
    height: 100%; 
 
    border-right: 0.2px solid black; 
 
    background: blue; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

現在我試圖設置在視口中單元vw代替像素的邊框寬度，但它給出了一個不同的結果。

ul { 
 
    width: 600px; 
 
    height: 300px; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    background: red; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    display: block; 
 
    width: calc((100% - 0.8vw)/5); 
 
    height: 100%; 
 
    border-right: 0.2vw solid black; 
 
    background: blue; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

正如你可以從上面的代碼段看到，有空間向右一點點。隨着更寬的視口，這會變得更大（嘗試查看片段的整個頁面）。所以我認爲問題在於這裏的vw單位和flexbox。

那麼這個錯誤的原因是什麼？

編輯：

從提供的答案和評論，我已經看到了還有其他更恰當的approches達到什麼我要怎樣做。我讚賞這些答案，但這些不是我的問題的答案。由於calc在這種情況下顯示錯誤，因此當我嘗試在其他情況下（而不僅僅是邊框）嘗試使用calc和視口單元時，很可能會導致更多問題。所以我需要知道原因和「calc」修復。

來源

2017-03-04 Anurag Daolagajao

我不知道爲什麼會發生這種情況，但是如果你不知道，可以使用'box-sizing：border-box;'並且邊框寬度不會影響元素的外部寬度。 –

在'calc'中使用'％'和'vw'有點奇怪，因爲'％'和'vw'都是不同基地的百分比。你沒有說'ul'的父項。假設'ul'父項的寬度是300px，並且視口寬度是'vw'是400px，所以'0.8vw'比預期的要多，並且存在空白區域。 – ata

@MichaelCoker是的，我看到了calc替代帖子「http://stackoverflow.com/questions/16034397/css-calc-alternative?rq=1」，並且正在考慮試用盒子大小。 –

你不需要做calc來爲你的li添加內容。如果您給0123,支柱，邊框和填充不會使容器增長。

ul { 
 
    width: 600px; 
 
    height: 300px; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    background: red; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    display: block; 
 
    width: calc(100%/5); 
 
    height: 100%; 
 
    border-right: 2px solid black; 
 
    background: blue; 
 
    box-sizing: border-box; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

來源

2017-03-04 06:47:47

看來你正在使用flex分發您ul裏面你li秒。在這種情況下，您不需要使用寬度來使這些寬度相等。這就是flex應該做的。

見這個例子：

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
ul, li { list-style: none; } 
 
ul { width: 600px; height: 300px; background: red; display: flex; } 
 
li { 
 
    flex: 1 0 auto; 
 
    border-right: 0.8vw solid black; 
 
    background: blue; 
 
} 
 
li:last-child { border-right: none; }

<ul> 
 
    <li></li><li></li><li></li><li></li><li></li> 
 
</ul>

在指定的容器flex dsiplay，你只需要申請對孩子的flex屬性，以使他們的行爲是靈活的項目。在您的具體使用情況，您需要滿足以下條件：

flex-grow：設置爲1，這將使你的li增長到填滿整個ul寬度。
flex-shrink：設爲0.您不希望您的li縮小。
flex-basis：設置爲auto。你希望你的li自動增長到均衡寬度。

所以，你看，你根本不需要calc。

您也可以，不必特別將display: block應用於您的li s。按照這裏的規格：https://www.w3.org/TR/css-flexbox-1/#flex-items

柔性項的顯示值被blockified：如果一個元件產生的柔性容器的同流子的指定顯示是直列級值，它計算到它的塊級別相當於

正如@BoltClock在註釋中指出的那樣，列表項已被封鎖。

國界

現在，來到邊境。在第一個示例中，您指定了0.2px單位的寬度。這沒有意義。儘管規格允許使用分數像素，但它會將其舍入到顯示屏上可用的最接近像素，通常爲1.

在您的第二個示例中，您希望邊框與視口一起縮放。那很好。沒有問題的0.8vw。

請看我發佈的示例，in this fiddle。調整結果窗口的大小，您將看到相對於視口大小改變的邊框。

最後，您可能想也可能不想設置box-sizing。這取決於你的佈局。無論你使用什麼，你一貫使用它。

來源

2017-03-04 06:54:05 Abhitalks

「你也可以，不需要專門將display：block應用於你的lis。」他只需要這樣做就可以了，因爲他已經設置了list-style：none。您引用的文本不適用於display：list-item，因爲display：list-item是塊級顯示類型，而不是內聯級別顯示類型（即display：inline-list-item）。 – BoltClock

謝謝@BoltClock。我錯過了。增加答案。「*他不需要這麼做，因爲他已經設置了list-style：none。*」 - 這裏沒有列表風格不應該是一個因素，因爲它仍然是一個列表項。看到這個：https://jsfiddle.net/abhitalks/mu4ds20p/1/ – Abhitalks

@Auurag，任何具體的理由來取消接受答案？ – Abhitalks

像素（px）：絕對像素。因此，例如，20px在任何屏幕上都將是20像素。如果顯示器的尺寸爲1980x1200，並且您將元素的高度設置爲200px，則該元素將佔用200像素。

視口高度/寬度（vw/vh）：相對於視口（基本上是瀏覽器windoe）的大小。

1px =（100/document.documentElement.clientWidth）vw 1px =（100/500）= 0。2vw

來源

2017-03-04 08:02:58 Piyali

CSS計算不準確

回答

相關問題