web-dev-qa-db-fra.com

comment supprimer un espace supplémentaire entre les boutons?

s'il vous plaît vérifier ce code dans jsfiddle

HTML:

<div id="main">
    <div id="menu">
        <a href="#" class="buttons">Home</a>
        <a href="#" class="buttons">About Us</a>
        <a href="#" class="buttons">Pictures</a>
        <a href="#" class="buttons">Contact Us</a>
    </div>
</div>

CSS:

#main
{
    width: 64em;
    height: 25em;
}

#menu

    {
        background-color: #00b875;
        height: 3em;
    }

    .buttons
    {
        text-decoration: none;
        color: #ffffff;
        line-height: 3em;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        font-family: courier new;
        -moz-transition: 1s linear;
        -ms-transition: 1s linear;
        -o-transition: 1s linear;
        -webkit-transition: 1s linear;
        transition: 1s linear;
    }

    .buttons:hover
    {
        background-color: #0d96d6;
    }

en passant très rapidement d'un bouton à un autre, vous remarquerez qu'il y a un écart entre deux boutons. Je veux me débarrasser de cet espace. des idées? Si vous répondez à la question, veuillez également expliquer pourquoi une propriété en particulier résoudra ce problème.

je sais que le rembourrage et la marge peuvent être modifiés, mais le résultat risque d'être déformé lors du zoom. veuillez indiquer un moyen stable de résoudre le problème.

merci

htmlcssanimationbuttonweb
18
amin

Regardez ceci jsFiddle

J'ai mis à jour display:inline-block; à display:block; dans les liens du menu et y ai ajouté float:left.

Lorsque vous utilisez inline-block, vous obtiendrez cet espace insignifiant entre les éléments, provoqué par les espaces entre les éléments de votre balise HTML.

26
Yotam Omer

Tout espace blanc entre les balises HTML est réduit à un seul caractère. C'est pourquoi vous avez cet espace. 

Vous pourriez:

  • Flottez vos éléments à gauche, 
  • Placez les </a> et <a> l'un à côté de l'autre dans la source ou 
  • Utilisez une astuce font-size: 0

Dans ce cas, personnellement, je laisserais tous mes <a>s laissés, bien que la suppression des espaces de votre source comporte le moins de mises en garde, la seule étant qu'il est plus difficile à lire.

15
Bojangles

Débarrassez-vous des espaces eux-mêmes: cela peut paraître désordonné, mais en fait c'est la chose la plus propre que vous puissiez faire. Tout ce que vous obtenez avec des astuces CSS consiste simplement à y placer des espaces, puis à nier leur existence. Au lieu de cela, vous voudrez peut-être les omettre; le seul problème à résoudre est la lisibilité.

Alors rendons-le lisible:

<div id="main">
    <div id="menu">
        <!--
        --><a href="#" class="buttons">Home</a><!--
        --><a href="#" class="buttons">About Us</a><!--
        --><a href="#" class="buttons">Pictures</a><!--
        --><a href="#" class="buttons">Contact Us</a><!--
        -->
    </div>
</div>

Encore une fois, je sais que cela semble bizarre, oui, mais réfléchissez-y. Le vrai bizarre ici est HTML lui-même, ne vous donnant pas un moyen clair de le faire. Considérez cela comme un balisage spécial! Cela pourrait aussi bien faire partie de la norme HTML; techniquement, btw, il est 100% standard, vous êtes libre d'utiliser les commentaires ...

7
dkellner

voici votre solution

http://jsfiddle.net/NPqSr/7/

.buttons
{
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left: 10px;
    float:left;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}
1
sangram parmar

Essayez ceci(JSFiddle)

CSS

#main {

    height: 25em;
}

#menu {
    background-color: #00b875;
    height: 3em;
}

.buttons {
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

.buttons:hover {
    background-color: #0d96d6;
}
0
Falguni Panchal

C'est 2017 : les envelopper dans un élément avec display: inline-flex et fléchir les boutons intérieurs avec quelque chose comme flex: 0 1 auto:

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>
0
Mateo Tibaquirá

Ajoutez le style ci-dessous à votre bouton. Si nécessaire, définissez la marge négative pour le premier des quelques boutons.

bouton {margin: 0px;}

0
VickyCool

Je pense qu'avec les dernières possibilités CSS, une solution plus propre consiste à utiliser display:inline-flex dans le menu et display:flex sur les boutons, et peut-être width:100% dans le menu:

http://jsfiddle.net/NPqSr/212/

0
adrianTNT