自动调整按钮大小以实现响应式设计

Question

有没有办法让按钮自动调整大小以适应其容器，以便进行响应式设计？

我认为如果有一种方法，不基于媒体查询（=更少的代码），那就更好了

希望图片对您有帮助。这是按钮的 CSS

.formButtonfront {
 width: auto;
border:1px solid gray;
border-radius:7%;
float:right;
font-size:0.875;
 }

浏览器是笔记本电脑中的 Chrome，只是尺寸缩小了

我想要灰色按钮（放置在图像后面）适合白色容器

提前致谢

PS 关于浮动：我clear:both;在页脚有一个。另外，即使我删除浮动，结果也是一样的。

更新 这是一个jsfiddle

Answer 1

所以你不需要display: blockor float: none，而是一个max-width

.formButtonfront {
  border:1px solid gray;
  border-radius:7%;
  font-size:0.875;
  word-wrap: break-word;
  width: 100px; // only for IE8
  max-width: 100%;
 }

看看这个小提琴（我缩小了内容的大小以查看它的外观）