faire un bloc div partager une ligne?

exemple -Edit-: http://jsfiddle.net/AXCap/faire un bloc div partager une ligne?

Html

<body> 
    <ul> 
     <li><nobr> 
      <a href="/a" class="one">a</a> 
      <a href="/b" class="two">b</a> 
      <a href="/c" class="three">c</a> 
      </nobr></li> 
    </ul> 
</body>

Css

li a 
{ 
    display: inline; 
    background:red; 
} 
li a.two 
{ 
    background:teal; 
} 

li a.three 
{ 
    display: block; 
    background:green; 
}

Je veux que les trois liens soient sur la même ligne, mais le 3e doit être un bloc pour prendre restant espace dans le li afin qu'il soit cliquable. J'ai essayé un certain nombre de choses et l'exemple ci-dessus est mon résultat le plus proche. Comment puis-je faire en sorte que le troisième lien partage la même ligne et un même bloc afin que la résiliation de la ligne soit cliquable?

J'ai essayé de virer à gauche et cela ne permet pas au troisième lien de prendre de l'espace restant.

Source

2010-04-08 Anonymous

Pouvez-vous publier le CSS qui va avec ces noms de classe? –

il n'existe pas. Je les ai supprimés et c'est juste .one {} .two {} .three {} ATM –

Quelque chose comme ça http://jsfiddle.net/3L7MW/?

li 
{ 
    width:100%; 
} 
li a.one 
{ 
    float:left; 
    background:red; 
} 
li a.two 
{ 
    float:left; 
    background:pink; 
} 

li a.three 
{ 
    display:block; 
    background:green; 
}

Source

2010-04-08 14:09:01 gregseth

Merci! (5 de plus à aller ..) –

Veuillez publier le CSS avec les noms de classes associés aux liens.

Si elles ne font aucun positionnement, alors cela pourrait fonctionner:

<li><nobr><a href=... class="one"><a href=... class="two"><a href=... class="three"></nobr></li>

HTH

Source

2010-04-08 13:23:54 Sunny

Tag intéressant. Je ne l'ai jamais vu auparavant. Je n'avais pas de chance avec ça. (voir divers liens je suis parti en question et commentaires) –

Essayez de donner un et deux un display: inline puis donner 3 un display: block

Si ce n » t travail, donner un et deux et 3 a clear: left

E DIT

Grattez cela. J'ai mal lu votre message original.

Qu'en est-il de donner aux 3 un display: inline?

Source

2010-04-08 13:45:22

alors il ne prend pas l'espace restant http://jsfiddle.net/gF3Dw/. Heres l'autre essai http://jsfiddle.net/nyRmH/ –

Pouvez-vous donner à chacun d'entre eux une largeur de jeu? Comme donner les 2 premiers une largeur de 30% et le dernier une largeur de 70%? –

faire un bloc div partager une ligne?

Répondre

Questions connexes