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: blockしたがって、 orは必要ありません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

makefloat: noneとdisplay: blockそのボタンの。

ボタンをコンテナとして作成し、親ボックスに合わせます。

役立つと思います。

于 2013-11-11T23:34:56.037 に答える