auto-resize buttons for responsive design

问题

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

回答1:

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)

回答2:

make float: none and display: block for that button.

It will make button as container and fit the parent box.

I think it will help you.

回答3:

button{
  width: 250px;
  max-width: 100%;
  padding: 15px;
}

<button>
  Button
</button>

来源：https://stackoverflow.com/questions/19918085/auto-resize-buttons-for-responsive-design