Wie kann ich ein Symbol und einen Eingabetext auf dieselbe Zeile setzen?

Ich möchte ein Symbol auf der linken Seite und einen Eingabetext auf der rechten Seite setzen, der den gesamten verbleibenden Platz einnimmt.Wie kann ich ein Symbol und einen Eingabetext auf dieselbe Zeile setzen?

---------------------------------------------------- 
| [ico] ---------------------------------------- | 
|  | input type="text"     | | 
|  ---------------------------------------- | 
----------------------------------------------------

Wenn ich beide mit display: inline-block eingestellt und setzen die Breite des Eingang 100% es die Linie springt, weil 100% ist nicht die space - icosize Berücksichtigung ...

Ich möchte erweitern die Eingabe in den verbleibenden verfügbaren Platz (Ich interessiere mich nicht für die vertikale Ausrichtung). Gibt es eine Möglichkeit, dieses Verhalten zu erreichen, ohne Tabellen zu verwenden?

An example of the problem on jsFiddle.

Quelle

2010-11-30 BrunoLM

Ein bisschen weniger kompliziert, dass ianaré-Version und in IE6 funktioniert:

http://jsfiddle.net/sUYBS/23/

Quelle

2010-11-30 14:02:22 RoToRa

SEHR clever! +10 Danke! – BrunoLM

-1

Versuchen Sie align = "absmiddle" im Symbol zu benutzen?

<img src="img.jpg" align="absmiddle">

Quelle

2010-11-30 12:20:52 mspir

Was die vertikale Ausrichtung des Symbols zu tun hat mit der Eingabe freien Platz einnimmt? – BrunoLM

Ich denke, die Antwort vertical-align: middle ist aber sehen Understanding vertical-align, or "How (Not) To Vertically Center Content"

Quelle

2010-11-30 12:21:01

Das Problem AFAICT ist nicht vertikale Zentrierung; es bringt die beiden Elemente dazu, horizontal nebeneinander zu sitzen, während das zweite Element erweitert wird, um den verfügbaren Platz zu füllen. –

mmm, wenn das, was Sie wollen, ist für die ico in der gleichen Zeile wie die Eingabe, aber für die Eingabe, um den Rest des Raumes zu füllen dh so breit wie möglich –

Was die vertikale Ausrichtung hat mit der Eingabe besetzt Freiraum? – BrunoLM

display: table-cell Versuchen.

Quelle

2010-11-30 12:23:39

Wo soll ich es hinstellen? Funktioniert es auf IE7 +? – BrunoLM

Sie legen es an der gleichen Stelle, an der Sie den 'display: inline-block' hatten. Sie sind auf sich allein gestellt, um verschiedene Browser zu testen, aber es ist definitiv Standard-CSS. –

Hmm, ich spielte mit jsFiddle herum und es scheint nicht so zu funktionieren, wie ich es erwartet hatte. :( –

float:left; für das Symbol. See, http://jsfiddle.net/sUYBS/11/

Quelle

2010-11-30 12:40:42

Warum die Abstimmung unten? Der Schwimmer löst tatsächlich Ihr Problem, nicht wahr? –

+1 für die Einfachheit. Plus das ist viel kompatibler als die angenommene Antwort. –

Außer dass es nicht funktioniert. – BrunoLM

Try this ...

<div style="display: table;"> 
<div style="display: table-row; width:100%;"> 
    <div style="display: table-cell;"> 
    <img src="img.png" width="16" height="11" alt="img"/> 
    </div> 
    <div style="display: table-cell; width:100%;"> 
    <input type="text" style="width:100%;"/> 
    </div> 
</div> 
</div>

Quelle

2010-11-30 12:48:14

Doesn ' Ich arbeite auf IE7, aber es funktioniert auf IE8 + und auf Browsern. Das ist, was ich gesucht habe. Danke. – BrunoLM

Wenn Sie eine Anzeige verwenden: Tabelle, eine Anzeige: Tabellenzeile und eine Anzeige: Tabellenzelle, warum in der Hölle nicht ein

? Ist es nach 2000 eine Sünde, Tische zu benutzen? –

@Augusto: haha, ich dachte, es wäre möglich, es ohne Tische zu schaffen. Aber es scheint, dass es nicht möglich ist. Ich werde Tische benutzen. Ich war nur neugierig, ob es einen einfacheren Weg dazu gibt. – BrunoLM

Verwandte Themen