Bouton d'étiquette longue étiquette dans IE7 numéro

J'ai un bouton radio avec de longues étiquettes qui se termine à la ligne suivante, il s'affiche correctement dans Firefox et IE8, mais pas dans IE7 et IE6.Bouton d'étiquette longue étiquette dans IE7 numéro

Fondamentalement, ce que je veux est illustré ci-dessous (où o est le bouton radio):

I/nous autorisons RETRAITS de mon compte Investec à et DIRECT DEBITS de ce compte désigné
I/nous autorisons seulement RETRAITS de mon compte à ce compte désigné
I/nous autorise les prélèvements automatiques seulement de ce compte désigné à mon compte

Mon css:

label { 
    float:none; 
    padding-left: 15px; 
    text-align:left; 
    width:420px; 
    display:block; 
    margin-left; 10px; 
}

Dans IE7 et IE6, la ligne suivante est sous le bouton radio, pas sous la première lettre du premier mot de l'étiquette

Source

2010-07-01 user474079

-1

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <style> 
html { 
    font: 12px sans-serif; 
} 
form 
ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 400px; 
} 
label { 
    cursor: pointer; 
} 
input { 
    float: left; 
} 
     </style> 
    </head> 
    <body> 
     <form action=""> 
      <ul> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label> 
       </li> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS ONLY from my account to this designated account</label> 
       </li> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label> 
       </li> 
      </ul> 
     </form> 
    </body> 
</html>

Source

2010-07-01 13:47:30 reisio

-1

Cela fonctionne pour moi dans IE8, IE7 et FF; Je n'ai pas IE6 ici pour tester mais l'approche devrait être solide. Je suppose que vous avez la liberté d'éditer le HTML.

Fondamentalement, ajoutez le remplissage gauche à l'étiquette, et la position: relative pour que les enfants en héritent la position, puis utilisez position: absolute sur le bouton radio pour le positionner dans ce padding.

HTML:

<label><input type="radio" />I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label> 
    <label><input type="radio" />I/we authorise WITHDRAWALS ONLY from my account to this designated account</label> 
    <label><input type="radio" />I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>

CSS:

label { position:relative;top:0; padding-left:25px; text-align:left; width:420px; display:block; } 
label input { position:absolute; top:0;left:0; }

Si les gens vont downvote choses, ils pourraient au moins dire pourquoi.

Source

2010-07-01 14:01:41

Ne semble même pas que vous ayez été satisfait de cette réponse, et pourtant vous vous fâchez lorsque quelqu'un l'évite. – reisio

Augmentez simplement la largeur de l'étiquette. Peut-être que vous pouvez aller avec une balise en ligne, par exemple.

<label style="width:420">

Ou vous pouvez ajouter cela comme une propriété dans le CSS pour le label.

Source

2011-12-02 10:38:18 Ams

Bouton d'étiquette longue étiquette dans IE7 numéro

Répondre

Questions connexes