nicht angemeldet
Hi Emmi,
<html><body><input type="submit" style="width: 100px; float: right;"><input type="text" style="width: 100%; margin-right: 100%;"></body></html>
Das Problem hierbei ist, dass die Breite des Eingabefeldes (100%) übers ganze Fenster geht und das Feld somit unter dem Button erscheint.
Das ist ja erstmal kein Problem, sondern sinnvoll nach der Logik von HTML und CSS. Design-Entscheidung liegt natürlich bei dir, die folgende Lösung liegt ihrerseits aber ziemlich an der Grenze des Sinnvollen/ Machbaren und sollte nicht zur Gewohnheit werden.
Schritt 1 ist hier: Wie verkleinere ich für den Viewport den Bereich, den Inhaltselemente als 100% Breite ansehen würden. Zum Beispiel so:
html, body {
margin-right:0;
}
body {
padding-right:120px;
}
Dann lassen wir zwei divs in einem Container nebeneinander floaten und schieben das rechte per negativem Rand in das Padding des body. Weiterhin verpackst du alles weitere vernünftig und schreibst es ordentlich auf (bitte keine styles in html Attributen):
.textbox {
width:100%;
float:left;
}
.submitbox {
width:100px;
float:left;
margin-right:-110px;
padding-left:10px;
}
.text {
width:100%;
}
.submit {
width:100px;
}
<body>
<div>
<div class="textbox">
<input class="text" type="text">
</div>
<div class="submitbox">
<input class="submit" type="submit" value="foo">
</div>
</div>
</body>
Das umfassende div kannst du z.B. benutzen, um vertikale Abstände herzustellen.
Gruß
Antipitch