html - 内联 block 大小/水平滚动条

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>

在每个元素中，我都有一个图像和一个标签。不幸的是，a 不能删除图像，并且将 a 标签显示为内联 block 也无法更改(li 标签的样式也不能)。

问题:我在 a 标签中的文本很长，多行显示是必须的(空白:正常)，但不知何故 a 标签的宽度总是比容器 div 宽 :( 不幸的是我没有找不到删除水平滚动条的方法。

额外的宽度总是等于图像的宽度。如果删除图像，滚动条就会消失。

是否可以在不删除图像的情况下做到这一点？ 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