CSS 用于响应式设计的自动调整按钮大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19918085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
auto-resize buttons for responsive design
提问by slevin
Is there a way to have buttons that auto-resize to fit its container , in order to have responsive design?
有没有办法让按钮自动调整大小以适应其容器，以便进行响应式设计？
It would be even better I think If there is an approach , not based on media queries (= less code)
如果有一种方法，而不是基于媒体查询（=更少的代码），我认为会更好
Hope the image helps you. Here is the CSS for the button
希望图片对你有帮助。这是按钮的 CSS
.formButtonfront {
width: auto;
border:1px solid gray;
border-radius:7%;
float:right;
font-size:0.875;
}
The browser is Chrome in a laptop, just sized down
浏览器是笔记本电脑中的 Chrome，只是缩小了尺寸
I want the grey button (placed after the image) to fit the white container
我希望灰色按钮（放置在图像之后）适合白色容器
Thanks in advance
提前致谢
PS About the float : I have a clear:both;in the footer. Also even If I remove the float, the result is the same.
PS 关于浮动：我clear:both;在页脚中有一个。即使我删除了浮点数，结果也是一样的。
UPDATEHere 's a jsfiddle
更新这是一个jsfiddle
回答by thomasstephn
So you don't need display: blockor float: none, but a max-width
所以你不需要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%;
}
Look at this fiddle(I reduce the size of the content to see how it looks)
看看这个小提琴（我缩小了内容的大小以查看它的外观）
回答by nikoloza
make float: noneand display: blockfor that button.
makefloat: none和display: block那个按钮。
It will make button as container and fit the parent box.
它将按钮作为容器并适合父框。
I think it will help you.
我想它会帮助你。
回答by TiiGRUS
button{
width: 250px;
max-width: 100%;
padding: 15px;
}<button>
Button
</button>