调整屏幕大小时,webkit浏览器中的元素宽度不会更改

时间:2014-03-19 12:08:13

标签: html css google-chrome responsive-design

我遇到了负责任的设计问题。我有相邻的菜单按钮,每个按钮包含图标和文字。文本位于图标的右侧...在较小的窗口/分辨率文本下方的图标下,因此按钮不是那么宽。当我将窗口从较小的范围扩展到更宽的时候,我希望文本从下到右返回,但它没有。此问题出现在chrome / safari中。在Firefox中一切顺利。有谁遇到过这个问题?有什么想法吗?

这是example尝试调整屏幕大小...

.menu ul li a { display: block; width: auto; height: auto; padding: 15px 20px; font-size: 15px; line-height: 30px; }

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/6pmzJ/5/

修正了以上小提琴:

1)您没有关闭IMG标签。

2)问题似乎与浏览器有关。我在文本周围添加了span并添加了以下CSS:

.menu ul li span { float: left; display: inline-block; }