quelques changements de style simples nécessaires

J'ai besoin que mes éléments de menu soient alignés au centre sans utiliser de remplissage ... Il se trouve actuellement comme this .. J'ai besoin que le texte soit aligné au centre comme this.quelques changements de style simples nécessaires

Le code que je l'ai utilisé est la suivante:

<div style="float:left; width:931px; background:url(images/cbw_consulting_07_1.jpg) repeat-x; height:39px;"> 
    <ul style="float:left; width:931px; font-family:Monotype Corsiva; font-size:21px; color:#FFFFFF; padding:5px 0px 0px 0px"> 
     <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Home</a></li> 
     <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">About Us</a></li> 
     <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Fabulous Finds</a></li> 
    </ul> 
</div>

Source

2010-09-04 Sachindra

marge: 0 auto; sur votre ul et une largeur fixe vous aidera. Il est également préférable de ne pas utiliser dans un style de ligne

<html> 
<head> 
    <style> 
     ul { 
      font-family:Monotype Corsiva; 
      font-size: 21px; 
      color: #FFFFFF; 
      padding:5px 0px 0px 0px; 
      display: block; 
      width: 300px; 
      margin: 0 auto; 
     } 
    </style> 
</head> 
<body> 
<div style="width:931px; background-color: #ff00ff; height:39px;"> 
    <ul> 
     <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Home</a></li> 
     <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">About Us</a></li> 
     <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Fabulous Finds</a></li> 
    </ul> 
</div> 
</body> 
</html>

Source

2010-09-04 13:06:38 tom

i ajouté juz de style en ligne pour vous montrer les gars à ce forum ... – Sachindra

bon exemple, mais pourquoi ne vous raccourcissez pas les valeurs de vos paddings, jusqu'à ce que vous le fassiez avec les marges? 'padding: 5px 0px 0px 0px;' == 'rembourrage: 5px 0 0' et' rembourrage: 0px 10px 0px 10px; '==' rembourrage: 0 10px' – meo

@ meo ... son bcoz je le trouve facile à retenir et travaille quand son rembourrage comme: 9px 0px 0px 0px; plutôt que de rembourrage: 9px 0 0 ..... – Sachindra

donner votre UL une largeur fixe qui correspond approximativement à la avec de votre de 3 li. Et puis donnez margin: auto; vous n'avez pas besoin que votre UL soit flottante: à gauche; aussi le style de liste et le type de style de liste sont des propriétés pour les éléments UL et non pour les LI ... Vous pouvez simplifier votre remplissage de remplissage: 0 10px; === padding: 0 10px 0 10px; et il n'est pas nécessaire de spécifier l'unité si la valeur est 0, car 0px == 0pt == 0em etc ...

Source

2010-09-04 13:04:18 meo

Essayez cette

<div style="float: left; width: 931px; background:url(&quot;images/cbw_consulting_07_1.jpg&quot;) repeat-x scroll 0% 0% transparent; height: 39px;"> 
<center> 
<ul style="font-family: Monotype Corsiva; font-size: 21px; color: rgb(255, 255, 255); display: inline; background: none repeat scroll 0% 0% Red; padding: 5px 0pt 0pt;"> 
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">Home</a></li> 
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">About Us</a></li> 
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">Fabulous Finds</a></li> 
</ul></center> 
</div>

Source

2010-09-04 13:27:26

quelques changements de style simples nécessaires

Répondre

Questions connexes