web-dev-qa-db-fra.com

HTML CSS Positionnement du bouton

J'ai 4 boutons dans un en-tête div. Je les ai tous placés en utilisant les marges haut et gauche dans css afin qu’ils soient tous côte à côte sur une ligne. Rien d'extraordinaire.

Maintenant, j'essaie de faire une action lorsque le bouton est enfoncé, le texte du bouton diminue légèrement.

J'utilise ce code en CSS:

    #btnhome:active{
    line-height : 25px;
}

HTML:

<div id="header">           
        <button id="btnhome">Home</button>          
        <button id="btnabout">About</button>
        <button id="btncontact">Contact</button>
        <button id="btnsup">Help Us</button>           
        </div>

Exemple de bouton CSS:

#btnhome {  
    margin-left: 121px;
    margin-top: 1px;
    width: 84px;
    height: 45px;   
    background: transparent;
    border: none;
    color: white;   
    font-size:14px;
    font-weight:700;
}

De plus, ces boutons fonctionnent sur un en-tête de fond, je suis sûr que cela a quelque chose à voir avec ces paramètres:

#header {
    background-image: url(images/navbar588.png);
    height: 48px;
    width: 588px;
    margin: 2em auto;   
    }

Cela fonctionne bien, mais le seul problème est que tous les autres boutons déplacent également leur texte? Pourquoi donc? Est-ce que je ne clarifie pas clairement que je veux utiliser uniquement #btnhome? Tous les boutons ont des identifiants complètement différents. Tous les boutons ont les mêmes paramètres CSS sauf les marges. Que dois-je éditer?

Merci beaucoup.

htmlcssbuttonpositionpressed
3
user1880779

comme je m'y attendais, oui, c'est parce que tout l'élément DOM est abaissé. Vous avez plusieurs options. Vous pouvez placer les boutons dans des divs séparés et float pour qu’ils ne s’affectent pas. la solution la plus simple consiste simplement à définir le bouton :active sur position:relative; et à utiliser top au lieu de margin ou line-height. exemple de violon: http://jsfiddle.net/5CZRP/

7
kennypu

essayez de remplacer ce changement de hauteur de ligne par un changement de marge ou de remplissage

#btnhome:active{
margin-top : 25px;
}

Edit: Vous pouvez également essayer d’ajouter une plage dans le bouton 

<div id="header">           
    <button id="btnhome"><span>Home</span></button>          
    <button id="btnabout">About</button>
    <button id="btncontact">Contact</button>
    <button id="btnsup">Help Us</button>           
</div>

Puis style que 

#btnhome span:active { padding-top:25px;}
1
Simon Martin
[type=submit]{
    margin-left: 121px;
    margin-top: 19px;
    width: 84px;
    height: 40px;   
    font-size:14px;
    font-weight:700;
}
0
Balaji Narendra

Utilisez des marges au lieu de line-height, puis appliquez float aux boutons. Par défaut, ils s’affichent sous la forme inline-block. Ainsi, lorsqu’un bouton est enfoncé, la ligne de trou est enfoncée avec lui. Float corrige ceci:

#header button {
    float:left;
}

Voici un travail jsfidle .

0
nienn