hauteur css et problème largeur

Je possède ce HTMLhauteur css et problème largeur

<div class="someClass"> 
    <ul> 
     <li><a href="index.html">1</a></li> 
     <li><a href="index.html">2</a></li> 
     <li><a href="index.html">3</a></li> 
     <li><a href="index.html">4</a></li> 
     <li><a href="index.html">5</a></li> 
    </ul> 
</div>

Problème:

Je veux faire les <a> s à la forme d'un carré, avec hauteur = 20px et width = 20px. Je peux le faire avoir la hauteur et la largeur si je le fais float: left. Dans ce cas, le problème se produit parce que j'ai besoin que le <ul> soit centré, mais il ne le sera pas à cause du float:left du <a>.

Comment puis-je le centrer avec la hauteur et la largeur des ancrages? Les points d'ancrage n'ont pas de longueur fixe ... l'échantillon est juste 5, mais il peut aussi croître jusqu'à 7 ou 9. J'ai aussi besoin que les liens soient en vue.

Source

2010-05-24 Reigel

Ok, fait ici est votre réponse

ceci est votre balisage

<div class="someClass"> 
    <ul> 
     <li><a href="index.html">1</a></li> 
     <li><a href="index.html">2</a></li> 
     <li><a href="index.html">3</a></li> 
     <li><a href="index.html">4</a></li> 
     <li><a href="index.html">5</a></li> 
    </ul> 
</div>

Votre CSS doit être quelque chose comme ça

.someclass { 
    width:100%; 
    overflow:hidden; 
} 
.someclass ul { 
    position:relative; 
    float:left; 
    left:50%; 
    list-style:none; 
} 

.someclass ul li { 
    position:relative; 
    float:left; 
    right:50%; 
} 

.someclass ul li a { 
    display:block; 
    height:100px; 
    width:100px; 
    border: 1px #f00 solid; 
}

Cette astuce est ne totalement flexible dépend pas de la taille de votre <UL> est

Source

2010-05-24 10:33:38 Starx

-1 , cela ne répond même pas à la première ligne de la question: 'Je veux faire la s pour former comme un carré, avec height = 20px et width = 20px.' – ANeves

ok mis à jour ma réponse – Starx

+0: A pu être amélioré , mais semble fonctionner comme prévu - supprimé -1. – ANeves

a est un élément en ligne hors de la boîte, qui ne peut généralement pas avoir la largeur et la hauteur qui lui est appliquée.

Si vous définissez forcément display: block dans sa déclaration de style, il se comportera comme un élément de niveau bloc et vous pouvez définir sa largeur et sa hauteur.

Source

2010-05-24 09:56:09

ahh merci pour la réponse rapide. J'ai fait votre suggestion mais elle doit être affichée en ligne ... de toute autre manière je peux la faire afficher en ligne? Je suis vraiment coincé ... – Reigel

'display: inline-block;' - mais attention, ça marche dans ce cas car a est naturellement en ligne, mais pour les éléments qui sont naturellement des éléments de bloc inline-block ne fonctionne pas pour IE7 : http://www.quirksmode.org/css/display.html#t03 – ANeves

Cela rendra votre 20x20 li et de les aligner sur le centre:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
    .someClass ul {line-height:20px;text-align:center;width:105px;margin:0 auto;overflow:hidden;} 
    .someClass ul li {display:block;width:20px;height:20px;float:left;background:blue;margin-right:1px;} 
    .someClass ul li a {color:#fff;} 
    </style> 
</head> 
<body> 
    <div class="someClass"> 
     <ul> 
      <li><a href="index.html">1</a></li> 
      <li><a href="index.html">2</a></li> 
      <li><a href="index.html">3</a></li> 
      <li><a href="index.html">4</a></li> 
      <li><a href="index.html">5</a></li> 
     </ul> 
    </div> 
</body> 
</html>

Ceci est une autre approche - il met tout en ligne avec une hauteur de ligne de 20px et peut avoir un certain nombre d'éléments:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
    .someClass ul {line-height:20px;text-align:center;} 
    .someClass ul li {display:inline;} 
    .someClass ul li a {display:inline} 
    </style> 
</head> 
<body> 
    <div class="someClass"> 
     <ul> 
      <li><a href="index.html">1</a></li> 
      <li><a href="index.html">2</a></li> 
      <li><a href="index.html">3</a></li> 
      <li><a href="index.html">4</a></li> 
      <li><a href="index.html">5</a></li> 
     </ul> 
    </div> 
</body> 
</html>

Source

2010-05-24 10:16:58 easwee

+1, semble fonctionner comme prévu. – ANeves

utilisation display:inline-block:

.someClass ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
} 

.someClass ul li { display: inline; } 

.someClass ul li a 
{ 
    display: inline-block; 
    text-decoration: none; 
    width: 20px; 
    height: 20px; 
}

Source

2010-05-24 10:19:34 Voyta

+1: parfait! Mais, en répétant le commentaire sur cette autre réponse: faites attention que inline-block ne fonctionne pas sur IE7 pour les éléments qui sont naturellement des éléments de bloc: http://www.quirksmode.org/css/display.html#t03 – ANeves

hauteur css et problème largeur

Répondre

Questions connexes