如果元素有邊距，我如何計算每個元素的寬度作爲百分比？

在下面的示例中，如何計算寬度作爲百分比，以便每個li元素都適合一行？我知道這不是25%，因爲我們必須考慮新的利潤率，所以我該如何設置它？如果元素有邊距，我如何計算每個元素的寬度作爲百分比？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 100%; 
 
} 
 
li { 
 
    display: inline-block; 
 
    float: left; 
 
    list-style: none; 
 
    margin-right: 1.25em; 
 
    width: 25%; 
 
} 
 
li:last-child { 
 
    margin-right: 0; 
 
} 
 
img { 
 
    width: 100px; 
 
}

<div> 
 
    <ul> 
 
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li> 
 
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li> 
 
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li> 
 
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li> 
 
    </ul> 
 
</div>

來源

2014-12-02 J82

之間，並獲得您設置的百分比的利潤了。 – 2014-12-02 04:35:02

@SalmanA我如何計算利潤率的百分比？ – J82 2014-12-02 06:38:41

使用類似'1％'的東西。這意味着頁邊距取決於父寬度而不是常數（例如，在1000px寬度上，頁邊距將是10px，而在500px上，頁邊距將是5px）。但是這使得計算直截了當。 – 2014-12-02 06:46:27

我認爲貴麗應

li { 
    display: inline-block; 
    float: left; 
    list-style: none; 
    width: 25%; 
}

刪除保證金右：1.25em在CSS李

來源

2014-12-02 03:52:47 yinyin

的功能是手Ÿ處理這個：

li { 
    display: inline-block; 
    float: left; 
    list-style: none; 
    margin-right: 1.25em; 
    width: calc(25%-.9375em); 
}

因爲我們只處理3利潤率（3.75em）。我們把這四個要素.9375em

jsfiddle

來源

2014-12-02 04:13:25 jacobcc

如果元素有邊距，我如何計算每個元素的寬度作爲百分比？

回答

相關問題