內嵌塊大小/水平滾動條

Question

我有以下列表：

<ul> 
    <li style="white-space: nowrap;"> 
     <img src="" style="width:25px;" /> 
     <a href="" style="white-space:normal; display:inline-block;">a b c d ...</a> 
    </li> 
</ul> 

在我有一個圖像和一個標籤中的每個項目。不幸的是，無法刪除圖像，並且將標籤顯示爲嵌入塊也無法更改（li標籤的樣式也不能）。

問題：我在一個標籤中的文本是相當長的，多行顯示是必須的（空白：正常），但不知何故，一個標籤的寬度總是比容器div寬：（不幸的是我沒有「T找到一種方法來去除水平滾動條。

額外的寬度是始終等於圖像的寬度。如果去掉滾動條消失的圖像。

是否有可能做到這一點無需拆卸圖像？a標籤應該只填充可用空間，但它填充的空間就好像圖像不在那裏一樣

https://jsfiddle.net/8aqoj3u0/1/

Answer 1

如果你想確保文本完全是可見的，並且圖像周圍包裹嘗試使用calc。

Calc非常有用，因爲它允許您混合測量。在這種情況下，鏈接寬度設置爲100％減去 25像素（以適應您的圖像）。

所以這個代碼將是：

a { 
    white-space:normal; 
    display:inline-block; 
    max-width: calc(100% - 25px); /*Subtract 25px - the width of your image */ 
} 

我已經更新您的plunker這裏：https://jsfiddle.net/1v1oeLtw/

下面是它的瀏覽器支持：http://caniuse.com/#feat=calc

Answer 2

要刪除水平滾動條，請將overflow-x屬性設置爲隱藏。

ul{ 
    overflow-x:hidden; 
}