Auto-Resize-Tasten für Responsive Design - CSS, Größe ändern, Responsive-Design

Gibt es eine Möglichkeit, Schaltflächen zu haben, deren Größe automatisch an den Container angepasst wird, um ein ansprechendes Design zu ermöglichen?

Es wäre noch besser, denke ich, wenn es einen Ansatz gibt, der nicht auf Medienanfragen basiert (= weniger Code)

Hoffe, das Bild hilft dir. Hier ist das CSS für die Schaltfläche

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

Der Browser ist Chrome in einem Laptop

Ich möchte, dass die graue Schaltfläche (nach dem Bild platziert) in den weißen Behälter passt

Danke im Voraus

PS Über den Schwimmer: Ich habe einen clear:both; in der Fußzeile. Auch wenn ich den Schwimmer entferne, ist das Ergebnis dasselbe.

AKTUALISIEREN Hier ist ein jsfiddle

Antworten:

Sie brauchen also nicht display: block oder float: none, aber 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%;
}

Schau dir das an Geige (Ich verkleinere den Inhalt, um zu sehen, wie er aussieht)

machen float: none und display: block für diesen Button.

Die Schaltfläche wird als Container erstellt und passt in die übergeordnete Box.

Ich denke, es wird dir helfen.