Bonjour à tous,

Je travaille actuellement sur une calculatrice en ligne HTML/CSS/JavaScript sur ce lien : https://timotheemm.github.io/online-calculator/.

Voici le visuel actuel :

Mais sur l'input/output en haut j'aimerais faire quelques modifications mais je ne sais pas trop comment m'y prendre :

- Je voudrais tout d'abord que le texte ne soit pas collé à la droite mais qu'il y ait un petit espace :

- Pareil pour le côté gauche.

- Enfin, j'aimerais que quand le calcul est trop long, une scroll bar apparaisse. Car sinon je trouve que le visuel est bizarre :

Le code de l'input :

CSS :

#display {
    width: 97.5%;
    height: 40px;
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    text-align: right;
    margin-bottom: 10px;
}

HTML :

<input type="text" id="display" disabled>

Ce projet est sur GitHub à l'adresse suivante : https://github.com/timotheeMM/online-calculator.

Si vous avez un compte, n'hésitez pas à faire une pull request directement sur le repository.

Merci d'avance pour votre réponse. 

-
Edité par Tim240 29 octobre 2023 à 20:16:48

Bonsoir,

>> Je voudrais tout d'abord que le texte ne soit pas collé à la droite mais qu'il y ait un petit espace :

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

>> Pareil pour le côté gauche.

https://developer.mozilla.org/fr/docs/Web/CSS/padding-left

>> une scroll bar apparaisse.

https://developer.mozilla.org/fr/docs/Web/CSS/overflow-x

Mais je n'ai jamais vu de scroll sur un input, utilisez un autre élément pour ce faire.

AbcAbc6 a écrit:

Bonsoir,

>> Je voudrais tout d'abord que le texte ne soit pas collé à la droite mais qu'il y ait un petit espace :

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

>> Pareil pour le côté gauche.

https://developer.mozilla.org/fr/docs/Web/CSS/padding-left

>> une scroll bar apparaisse.

https://developer.mozilla.org/fr/docs/Web/CSS/overflow-x

Mais je n'ai jamais vu de scroll sur un input, utilisez un autre élément pour ce faire.

Merci pour votre réponse. J'ai résolu les deux premiers problèmes, juste pour le dernier auriez-vous une suggestion d'élément pouvant remplacer l'input adapté au projet ?

Sémantiquement j'utiliserais <output>

AbcAbc6 a écrit:

Sémantiquement j'utiliserais <output>

Ok merci je vais tester.