CSS rendre la zone de texte de remplissage tout en largeur

J'ai le texte suivant "ligne" dans ma page web

<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>

Le menu Déroulant je n'ai pas vraiment de contrôle sur la largeur, comme c'tailles pour s'adapter quelle que soit la plus longue valeur de l'option est. Les Boutons sont de largeur fixe. Comment puis-je obtenir la zone de texte à remplir tous disponibles largeur restante?

J'ai essayé de mettre dans un tableau, mais le même problème, à savoir comment dois-je faire de toutes les autres colonnes aussi petite que possible pour s'adapter à leur contenu, puis la zone de texte de la colonne de remplissage largeur restante?

Hacky solutions sont beaux, si nécessaire, je l'ai depuis longtemps abandonné toute prétention de même se soucier des normes CSS quand il est si difficile de faire la chose la plus simple.

Modifier: afin de clarifier, par zone de texte, je veux dire <input type="text"/>

Vous pouvez contrôler la largeur de la liste déroulante avec une largeur de l'attribut style. <select style="width:200px;">...</select> et al
Je ne veux pas de définir la largeur de la liste déroulante. Il devrait taille pour s'adapter à son contenu.
Pour l'enregistrement, par zone de texte vous dire un <input type="text"/> pas un <textarea></textarea> correct?
oui correct

OriginalL'auteur fearofawhackplanet | 2010-07-07

  1. 3

    Je vous suggère les suivantes:

    <div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>
    Que cela ne fonctionne pas, fait encore la zone de texte à 100% de la div de largeur alors maintenant, il va juste au large de la droite de l'écran.

    OriginalL'auteur JochenJung

  2. 1

    Vous pouvez définir la largeur de la zone de texte à 100% (avec css comme vous l'avez fait avec la div), donc ça va être étendu à la pleine mesure de sa société mère (en supposant que la balise parent s'étend le plein écran).

    Cela met juste la zone de texte sur sa propre ligne. Je veux que tout le contenu sur une seule ligne.

    OriginalL'auteur xil3

  3. 0

    La seule façon dont je le vois, il est possible avec Javascript, afin que vous obteniez la largeur de la div (en pixels), de déduire la taille actuelle des autres contrôles et ajouter le résultat qu'avec de l'entrée. Que serait vous obliger à mettre le texte à l'intérieur d'une période de contrôle (de sorte que vous pouvez obtenir de sa taille).

    OriginalL'auteur Pere Villega

  4. 0

    Définir la largeur de la textbox à 100% avec la propriété css display: inline;?

    Si vous définissez la display:inline style, la largeur de style ne fonctionne plus parce que l'élément est inline. L'utilisation de la largeur de style, vous devez avoir l'affichage block ou inline-block...ou quelque chose qui vous permettra de régler la largeur. Si vous ne voulez pas la propriété width de l'effet de votre style, display:inline fonctionne très bien parce que la largeur de style ne s'applique plus.

    OriginalL'auteur Jonny Haynes

  5. 0

    Ce n'est pas faisable en CSS autant que Chrome est concerné. Le moyen est en manipulant le la taille de l'attribut du contrôle de formulaire à l'aide de JavaScript. Si le longueur de la chaîne est de 25, ajouter un supplément d'au moins 10 pour le jeu.

    HTML

    <!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />

    JavaScript /jQuery

    <script>
    var value = jQuery('#textbox1').val();                  //43
    jQuery('#textbox1').attr('size', value.length + 10 );   //resizes the textbox
</script>

    Une autre option est également par le pré-calcul de la taille d'un back-end script.

    PHP /HTML

    <?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />

    OriginalL'auteur Abel Callejo