Ajouter un séparateur entre les boutons dans une barre de menu (HTML/CSS)
Je suis en train de faire un site web mobile et d'avoir quelques difficultés à faire quelques modifications à ma barre de menu. Je ne suis pas un expert dans ce domaine donc votre aide serait grandement appréciée.
Ci-dessous la des codes de la barre de menu.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center"><a href="../Products.html">Products</a></div>
</li>
<li>
<a href="../Order Online.html">FAQ</a></li>
</ul>
C'est un basic de la barre de menu et je veux régler ce de du centre et ont également horozontal lignes de briser chaque bouton à part alors que tout cela est centrée et s'inscrit à 100% sur un écran de mobile. Votre aide est grandement appréciée
EDIT: comme l'espace après chaque bouton, mais au lieu de cela theres une ligne horizontale
EDIT: modification de la largeur de 75% à 80px. Notez que j'ai aussi changé la div ID de mon code car j'ai eu d'autres problèmes avec l'identification. 🙂 J'espère que cette habitude de vous confondre
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
Vous devez vous connecter pour publier un commentaire.
J'ai ajouté ci-dessous les lignes dans votre code css. J'espère que c'est ce que vous voulez.
Travail Violon
margin-left
valeur négative qui est surli
. Leli
s'approcher. Quelque chose comme ceci jsfiddle.net/bkDHk/3ul{margin-right:-15px;}
ou une valeur sur laquelle vous êtes satisfait.Maintenant juste supprimer
float:left
dans votreli
et ajouterdisplay:inline-block;
et ajoutertext-align center
dans votre ul tagcomme ce
Démo
à partir de votre css supprimer
float:left;
surli
's et ajoutertext-align:center;
et cela devrait fonctionner:ici est un travail JSFiddle.
Mise à jour
Dans ce cas, vous pouvez modifier le CSS pour.
Ici est un travail JSFiddle