Comment rendre le code HTML plus lisible?

Question

J'ai 5 boutons qui sont codés sur 1 seule ligne. Cela me permet de les serrer les uns à côté des autres sans aucun espace entre les deux, ce que je veux.

Cependant, si je déplace le code de chaque bouton sur une ligne, il y a des espaces entre les boutons, ce que je ne veux pas.

Voici l'exemple de code pour 2 boutons:

<button id="home" type="button">Home</button><button id="save" type="button">Save 
</button><button id="create" type="button">Create</button> 

Merci

Answer 1

Créez vos boutons avec une classe:

<button class="button" id="save">Save</button> 
<button class="button" id="new">New</button> 
<button class="button" id="load">Load</button> 

Créer une classe dans le fichier CSS:

.button { 
    display: block; 
    float: left; 
    width: 100px; /*For example*/ 
} 

qui fera de vos boutons collent ensemble sans espaces, et HTML sera plus lisible.

EDIT: Comme vous utilisez un ID, ajoutez cet ID dans votre classe CSS avec une marge à gauche.

/* in this example, the button to the mostleft is #save, so...*/ 
#save { 
    margin-left: 10px; 
} 

Voici le demo

Answer 2

Vous pouvez utiliser l'attribut « classe » de l'élément d'entrée pour définir les options de style qui influent sur tous les boutons qui ont obtenu la classe. Laissez-moi vous montrer:

<button id="home" type="button" class="btn-style">Home</button> 
<button id="save" type="button" class="btn-style">Save</button> 
<button id="create" type="button" class="btn-style">Create</button> 

Et dans votre css vous avez les stylings:

.btn-style{ 
//your css here 
} 

Ne pas avoir d'espace entre les touches que vous utilisez simplement le style CSS. Mais pour ce faire, recherchez sur google. Vous pouvez avoir besoin d'attributs de style tels que "affichage, marge, flottement ...".

Greetz

Answer 3

Eh bien, il est assez irritant que HTML fait cela, mais la façon dont je le résoudre est la suivante:

<button>btn1</button 
><button>btn2</button 
><button>btn3</button 
><button>btn4</button 
><button>btn5</button> 

Ou que d'autres utilisateurs sont également ce qui suggère, vous pouvez insérer des commentaires entre-deux :

<button>btn1</button><!-- 
--><button>btn2</button><!-- 
--><button>btn3</button><!-- 
--><button>btn4</button><!-- 
--><button>btn5</button> 

Answer 4

pour votre problème d'espaces entre les éléments en ligne tels que <button>, essayez d'écrire le code comme ça:

<button id="home" type="button">Home</button><!-- 
--><button id="save" type="button">Save</button><!-- 
--><button id="create" type="button">Create</button> 

Answer 5

Appliquer css commun par button sélecteur et tous les styles spécifiques par leurs ids

button{ 
    margin-top: 20px; 
    height: 40px; 
    width: 240px; 
} 
#home{ 
    margin-left: 40px; 
} 
#save{ 

} 

Answer 6

Vous pouvez mettre le retour à la ligne dans vos tags:

<button>btn1</button 
><button>btn2</button 
><button>btn3</button> 

Vous pouvez commenter le l'espace entre vos tags, c'est comme si l'espace n'était même pas là. Comme pour CSS, CSS vous permet de définir des attributs pour plusieurs classes/ids/etc en même temps.

#save, #home { 
    margin-top: 20px; 
    height: 40px; 
    width: 240px; 
} 
#home { margin-left: 40px; }