3

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

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

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

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

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

我希望灰色按钮（放置在图像之后）适合白色容器

提前致谢

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

更新 这里是一个jsfiddle

在此处输入图像描述

4

3 回答 3

4

所以你不需要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%;
 }

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

于 2013-11-12T00:09:15.317 回答
2

为那个按钮制作float: none和display: block。

它将按钮作为容器并适合父框。

我想它会对你有所帮助。

于 2013-11-11T23:34:56.037 回答
1 

button{
  width: 250px;
  max-width: 100%;
  padding: 15px;
}
<button>
  Button
</button>

于 2019-01-22T18:56:23.677 回答