Contrôle d'entrée HTML largeur maximale disponible?

Question

J'ai une ligne dans une page Web. qui a trois contrôles

SomeText Input      Button 

It is like this 
<div> SomeText <Input/> <img> </div> 

Dans img ci-dessus est flottant droit

En ce moment j'ai la taille d'entrée 30, mais dans une petite résolution 30 est trop grand pour la ligne et il se divise en deux.

Je souhaite que la largeur d'entrée soit maximale au lieu de la largeur fixe.

Si j'essaie size = 100%, il faut que la ligne entière commence à finir de pousser le texte et img au-dessus et au-dessous dans la nouvelle ligne.

Comment dois-je formater cette ligne?

Answer 1

Dans le cas simple:

<div> 
    <label for="thing">SomeText</label> 
    <input type="text" id="thing" /> 
    <img /> 
</div> 

div label { float: left; width: 20%; } 
div input { width: 60%; } 

Cela suppose que someText se rangent bien dans 20% quelle que soit la largeur que vous avez.

Mais peut-être que non.

Si vous voulez avoir des éléments de taille fixe (par exemple 8em chacun) sur les côtés et soustraire ceux de la largeur de l'entrée, vous devez dire 100% minus 16em. Malheureusement, CSS n'a pas cette fonction de calcul d'expression. Le mieux que vous pouvez gérer est en ajoutant des emballages pour faire 100% correspondent à ce que vous voulez vraiment:

<div> 
    <label for="thing">SomeText</label> 
    <img /> 
    <div> 
     <input type="text" id="thing" /> 
    </div> 
</div> 

div label { float: left; width: 8em; } 
div img { float: right; width: 8em; } 
div div { margin-left: 8em; margin-right: 8em; } 
div div input { width: 100%; } 

Il est un peu moche que vous devez bidouiller l'ordre de balisage pour les flotteurs (ou utilisez le positionnement absolu). À ce stade, vous pourriez être mieux juste d'abandonner et de l'aide d'une table pour obtenir la largeur désirée:

<table><tr> 
    <td class="label"><label for="thing">SomeText</label></td> 
    <td class="input"> <input type="text" id="thing" /></td> 
    <td class="img"> <img /></td> 
</tr></table> 

table { table-layout: fixed; width: 100%; } 
tabel .label, table .img { width: 8em; } 
table input { width: 100%; } 

souvent formes de mise en page de liquide peu complexes dépassent les capacités de positionnement CSS et ont besoin d'aide de tables. (De toute façon, un peu de taille de boîte sur l'entrée peut également aider à aligner les choses.)