Chaque fois que je dois travailler avec les entrées em> ce problème se produit. Mon objectif est de faire une forme d'entrée simple et d'atteindre ce numéro de type d'entrée aura la même largeur, avec petit Espace entre eux dans une ligne, juste sous "Description" Entrée. P> J'ai essayé de les ajouter à DIVS et d'appliquer l'affichage: en ligne-block à eux, mais cela n'a pas fonctionné. Maintenant, j'ai essayé d'appliquer l'affichage: Flex dessus A Ceci est le résultat. Changer la largeur de l'entrée ne fonctionne pas. Merci pour votre aide. P> p>
<div className="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div className="flex">
<div className="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div className="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>
4 Réponses :
Deux problèmes:
En outre, vous devriez toujours essayer de poster un extrait de travail qui montre votre problème. Vous récupérerez des réponses plus rapidement et des réponses plus susceptibles de travailler! P>
p>
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>Non ce n'est pas un problème. Nom de classe J'utilise exprès. Ceci est juste petit code extrait de mon application réactive et, en réagissant, il est écrit comme ça .. Et avec je ne veux pas être réglé à 100% car il est censé être juste une petite boîte de saisie, qui réagit à réagir bouton cliquez sur @DCR
Vous pouvez utiliser pour plus d'informations vérifier < Un href = "https://developer.mozilla.org/en-us/docs/web/css/grid-column" rel = "Nofollow Noreferrer"> Ce Doc de MDN sur la grille Style! affichage: grille sur votre parent et modifier le premier enfant de la grille à parcourir sur la première ligne comme:
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>
juste ajouter .InputNumber {flex-base: 48%; } à votre CSS et cela fera le travail.
Merci! C'était la solution pour mon problème. Je vais certainement prendre note quelque part avec cette ligne de code. C'est mon problème pour les âges, quand il s'agit de travailler avec des intrants
Si vous souhaitez garder la largeur de l'entrée de l'entrée à 30%, vous pouvez faire quelque chose comme ceci:
html CSS 
Je ne suis pas sûr de comprendre votre question. Le problème que vous décrivez, comme je l'ai lu, est résolu dans la capture d'écran que vous avez fournie. Pourriez-vous clarifier ce que vous recherchez?
Désolé d'être incertain. Mon objectif est que deux entrées que j'ai affichées à côté de l'autre à l'aide d'affichage Flex ont un écart important entre (je veux dire que l'écart doit être aussi gros que l'écart entre les heures et la description d'entrée) et la largeur de ces 2 entrées devrait être plus grande @Dan. Mullin.
Le code que vous avez fourni ne produit pas le résultat que vous affichez dans la capture d'écran. Cependant, si vous êtes déjà affiché dans la capture d'écran et que vous souhaitez simplement moins d'espace entre les entrées Heures et minutes, vous pouvez augmenter la largeur du numéro d'entrée vers
49% ou àcalc (50% - 5px)Lorsque je définit la largeur de numéro d'entrée à 49%, la largeur de l'entrée diminue de moitié. Pour être plus clair, je vais modifier ma question
.InpoBox entrée [TYPE = "Numéro"] {largeur: auto; Flex: 1;}ne change pas la largeur ou l'écart. Je ne comprends pas ce que c'est le problème. Je vais créer des codesandbox pour vous afin que vous puissiez voir le code total
Codesandbox.io/s/linting-http-lqdcu?file = / src / app.js Voici un lien pour Sandbox. Il y a un bouton dans le coin supérieur droit, qui appellera un composant d'alerte