wake-up-neo.com

Wie lässt sich das Texteingabefeld so gestalten, dass es die gesamte verbleibende Breite im übergeordneten Block einnimmt

Wie erreichen Sie Folgendes:

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘
  • label ist nach links ausgerichtet
  • button ist nach rechts ausgerichtet
  • text-box nimmt die gesamte verbleibende Breite des übergeordneten Elements ein
  • paragraph ist nach links ausgerichtet, muss auch mit label nach links ausgerichtet sein

Sowohl label als auch button sollten an anderen Stellen definierten Schrifteigenschaften so weit wie möglich folgen. parent ist innerhalb des Fensters zentriert und kann natürlich eine beliebige Breite haben.

Bitte beraten.

blockcss
38
user422039

Aktualisiert [Oktober 2016]: Flexbox-Version ...

form {
  display: flex;
}
form input[type="text"] {
  flex: 1;
}
<form>
  <label>Name</label>
  <input type="text" />
  <button>Submit</button>
</form>
<p>Lorem ipsum...</p>

Ursprüngliche Antwort [Apr 2011]: Tabellenlose CSS-Version (von Tabellenverhalten) ...

<div id="parent">
    <div id="inner">
        <label>Name</label>
        <span><input id="text" type="text" /></span>
        <input id="submit" type="button" value="Submit" />
    </div>
    <p>some paragraph text</p>
</div>

CSS ...

#inner {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
}
span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}
#text {
    width: 100%;
}
#submit {
    display: table-cell;
}

Demo: http://jsfiddle.net/wdm954/626B2/4/

50
wdm

Ich mag die erste Antwort nicht mit der "table-less" -Version, die Tabellenzellen verwendet. Noch die zweite Antwort, die tatsächliche Tabellen verwendet. Noch eine dritte Antwort, die fest codierte Breiten verwendet. Hier ist die Lösung mit flex . Es ist bei weitem am einfachsten:

#parent {
  display: flex;
}
input {
  flex: 1;
}
<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>

12
asdjfiasd

Tabellen verwenden. : D Ich weiß, dass Leute Tabellen hassen, aber in dieser Situation funktionieren sie ...

<div id="parent">
    <table style="width:100%">
        <tr>
            <td>label</td>
            <td style="width:100%">
                <input type="text" style="width:100%">
            </td>
            <td>
                <button>clickme</button>
            </td>
        </tr>
    </table>
</div>
9
Thomas Shields

Vergessen Sie nicht, dass Sie calc() verwenden können. Nehmen wir an, die Breite der von label und button verwendeten Breite beträgt 100px (einschließlich Rand), dann ist die Breite:

.text-box {    
  width: calc(100% - 100px);
}

Wenn Sie denken, dass es nicht viele Browser unterstützt, liegen Sie tatsächlich falsch. Es unterstützt jetzt viel. Die Zeit hat sich geändert

2
Aminah Nuraini

Der einzige Weg, wie ich dies oder ähnliches erreichen kann, besteht darin, das "Textfeld" als Blockelement zu haben, das automatisch die gesamte Breite des übergeordneten Elements ausfüllt und dann die Auffüllung links und rechts gleich der Gesamtbreite von die Behälter links und rechts. Legen Sie dann für die Elemente "label" und "button" die Position als relative fest und verschieben Sie sie dahin, wo sie sich befinden müssen (float: left, float: right).

So etwas wie,

HTML:

<div id="parent">
    <div id="label">label</div>
    <div id="button">button</div>
    <div id="text-box">
        text<br />
        text<br />
        text<br />
        text<br />
        text
    </div>
</div>

CSS:

div#label
{
    position: relative;
    float: left;
    width: 200px;
    background: #F00;
}

div#button
{
    position: relative;
    float: right;
    width: 120px;
    background: #0F0;
}

div#text-box
{
    padding-left: 200px;
    padding-right: 120px;
    background: #00F;
}

Wenn die Schaltflächen- und Beschriftungselemente keine festgelegte Breite benötigen, können alle Elemente nur ihre Breite als prozentualen Wert angeben (alle bis zu 100%).

2
Marty

Es funktioniert ohne Flex und Tabellen, wenn Sie float: right zuweisen und die Schaltfläche (oder mehrere Tasten in umgekehrter Reihenfolge) vorher das Eingabefeld setzen.

Legen Sie dann das Etikett mit float: left ein, geben Sie das Eingabefeld 100% width ein und wickeln Sie es in ein span mit display: block und overflow: hidden.

Keine Magie beteiligt:

<div style="width:100%">
  <button style="float:right">clickme 2</button>
  <button style="float:right">clickme 1</button>
  <label style="float:left">label</label>
  <span style="display:block;overflow:hidden">
    <input type="text" style="width:100%"/>
  </span>
</div>

Die Grundidee, dass alle rechten Seitenschaltflächen vor dem Eingabefeld in umgekehrter Reihenfolge angegeben werden.

0
Brian Haak