自动调整大小的按钮可进行响应式设计 [英] auto-resize buttons for responsive design

问题描述

是否有一种方法可以使按钮自动调整大小以适合其容器，以进行响应式设计?

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

希望图像对您有所帮助.这是按钮的CSS

  .formButtonfront {宽度:自动;边框:1px纯灰色；边界半径:7％；float:right;字体大小:0.875;} 

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

我希望灰色按钮(位于图像后)适合白色容器

预先感谢

PS关于浮动:我在页脚中有一个 clear:both; .即使删除浮点数，结果也是一样.

更新这是(我缩小了内容的大小，看它看起来如何)

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

.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

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.

UPDATE Here 's a jsfiddle

解决方案

So you don't need display: block or float: none, but a 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)

这篇关于自动调整大小的按钮可进行响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！