przyciski automatycznej zmiany rozmiaru dla responsywnego projektowania - css, resize, responsive-design

Czy istnieje sposób, aby przyciski, które automatycznie zmieniają rozmiar, pasowały do ​​jego kontenera, aby mieć responsywny projekt?

Myślę, że byłoby jeszcze lepiej Jeśli istnieje podejście, nie oparte na zapytaniach o media (= mniej kodu)

Mam nadzieję, że obraz ci pomoże. Oto CSS dla przycisku

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

Przeglądarka jest Chrome w laptopie, tylko zmniejszona

Chcę, aby szary przycisk (umieszczony za obrazem) pasował do białego pojemnika

Z góry dziękuję

PS O floacie: Mam clear:both; w stopce. Nawet jeśli usuwam pływak, wynik jest taki sam.

AKTUALIZACJA Tutaj jest jsfiddle

Odpowiedzi:

Więc nie potrzebujesz display: block lub float: none, ale 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%;
}

Spójrz na to skrzypce (Zmniejszam rozmiar zawartości, aby zobaczyć, jak wygląda)

robić float: none i display: block dla tego przycisku.

Utworzy przycisk jako pojemnik i pasuje do pudełka nadrzędnego.

Myślę, że to ci pomoże.