J'ai un problème avec l'entrée de texte, peut-il être fabriqué «adaptatif»? Si j'ajoute l'entrée est la largeur, il y aura trop d'espace inutile dans le côté gauche. Encore une fois, si ce n'est pas assez large, vous ne pouvez pas voir l'entrée entière.
est là un moyen de rendre la zone" Adaptive "? Donc, si la réponse est juste 1, le texte de la droite est plus proche du nombre et si la réponse est plus longue, vous pouvez voir toute la réponse. Merci 
3 Réponses :
N'utilisez pas de max-largeur et utilisez plutôt une largeur avec pour cent ou px. cela fera l'élément adaptatif.
Vous pouvez gérer cela à l'aide d'un conteneur flex et p> flex-poussser: 1 code> pour l'élément enfant qui devrait prendre l'espace le plus disponible.
<div class="container">
<label for="textInput" class="first">The following number:</label>
<input type="text" id="textInput">
<span class="result">is numeric</span>
</div>
Vous pouvez définir la largeur par défaut pour correspondre avec celle d'un caractère (dépend des paramètres de police).
Ensuite, mettez à jour sur chaque clé KeyPress: jsfiddle p> Si vous n'entrez pas les données dans le champ manuellement, mais définissez-la via le code, vous pouvez utiliser changer code>. Cela fonctionnera pour les deux situations mais ne sera visible que lorsque la mise au point n'est plus sur le champ d'entrée: P> $(".answer").change(function() {
this.style.width = ((this.value.length + 1) * 12) + 'px';
})
Hé, veuillez fournir des informations plus claires de ce que vous voulez!
@Mdhésiari a ajouté une petite explication; Existe-t-il un moyen de rendre la région 'Adaptive'? Donc, si la réponse est juste 1, le texte de la droite est plus proche du nombre et si la réponse est plus longue, vous pouvez voir toute la réponse.
Y a-t-il une raison pour laquelle vous n'utilisez pas de portée? Pourquoi le champ d'entrée tel qu'il est désactivé?
@Robinv. Cela imprime simplement le calcul des entrées que vous avez préalablement données.