内嵌块大小/水平滚动条

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; 
}