casella di controllo Allinea e l'etichetta

Question

Ho una forma di codice che assomiglia a questo:

<div id="right_sidebar"> 

<form id="your_name" name="your_name" action="#" method="post" style="display: block; "> 
    <fieldset> 
     <label for="name">Name</label> 
     <input type="text" name="name" id="name" value=""> 
     <label for="lastname">Last Name</label> 
     <input type="text" name="lastname" id="lastname"> 
       <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a></label> 
     <textarea name="msg" id="msg" rows="7"></textarea> 
     <input type="checkbox" name="agree"> 
     <label for="agree">Accept the terms</label> 
       <button class="blue_button" type="submit">Send</button> 
    </fieldset> 
    </form> 

</div>​ 

E che è in stile con il seguente CSS:

body { 
color: #333; 
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif; 
} 

#right_sidebar { 
padding-top: 12px; 
width: 190px; 
position:relative; 
} 

form { 
background: #EEF4F7; 
border: solid red; 
border-width: 1px 0; 
display: block; 
margin-top: 10px; 
padding: 10px; 
} 

form label { 
color: #435E66; 
    display:block; 
font-size: 12px; 
    } 

form textarea { 
border: 1px solid #ABBBBE; 
margin-bottom: 10px; 
padding: 4px 3px; 
width: 160px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
} 
form label a { 
display: block; 
padding-left: 10px; 
position: relative; 
text-decoration: underline; 
} 


form label a .sp { 
background: #EEF4F7; 
height: 0; 
left: 0; 
position: absolute; 
top: 2px; 
width: 0; 
border-top: 4px solid transparent; 
border-bottom: 4px solid transparent; 
border-left: 4px solid #333; 
} 

form button.blue_button { 
margin-top: 10px; 
vertical-align: top; 
} 

button.blue_button{ 
color: white; 
font-size: 12px; 
height: 22px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
} 
button.blue_button { 
background-color: #76C8C6; 
border: 1px solid #7798B7; 
text-shadow: 1px 1px 0px #567C9E; 
} 

Come si può vedere la casella di controllo è in cima dell'etichetta. Vorrei che entrambi fossero "sulla stessa linea". Quindi, sembrerebbe "[] Accetta i termini". E come dovrei fare che il testo sia allineato verticalmente alla casella di controllo.

Come potrei fare entrambe le cose?

Si può vedere dal vivo qui: form, checkbox failing

Answer 1

Una possibilità è quella di modificare lo stile dell'elemento label che segue la casella di controllo:

​input[type=checkbox] + label { 
    display: inline-block; 
    margin-left: 0.5em; 
    margin-right: 2em; 
    line-height: 1em; 
} 

JS Fiddle demo.

Questo è, tuttavia, piuttosto fragile come le margin s sono un po 'arbitrario (e la margin-right è puramente per forzare il seguente button alla riga successiva). Anche il selettore attributo-uguale può causare problemi nei browser più vecchi.

Come implicito, nei commenti, da Mr.Alien realtà è più facile bersaglio sulla casella stessa con questo selettore notazione:

input[type=checkbox] { 
    float: left; 
    margin-right: 0.4em; 
} 

JS Fiddle demo.

Answer 2

E 'perché l'etichetta ha display: block su di esso. Significa che (senza un float o hack) dichiarerà la propria linea.
Cambialo in display: inline-block o lascia la regola di visualizzazione lontana e il gioco è fatto.

Visto che l'avete fatto intenzionalmente per le prime due etichette, dovreste dare all'etichetta accept the terms un'identificazione e usare form #accepttermslabel {display: inline-block}. Ciò sostituirà le altre regole et perché è più specifico.

Answer 3

Avvolgi la casella di controllo e il testo all'interno del tag <label>. Funziona con il tuo attuale CSS visto qui in questo jsFiddle Demo.

<label for="checkbox"> 
    ​<input id="checkbox" type="checkbox"> My Label 
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 4

biforcuta vostro violino here con una piccola modifica. Ho annidato la casella di controllo all'interno dell'etichetta.

<label for="agree"><input type="checkbox" name="agree">Accept the terms</label> 

Spero che sia d'aiuto.

Answer 5

Tutto ciò che dovete fare è aggiungere display: inline allo label. Come questo:

label[for="agree"] { 
    display: inline; 
} 

Si può anche essere necessario aggiungere quanto segue per ottenere il pulsante Send di rimanere sulla propria riga:

button[type="submit"] { 
    display: block; 
} 

che è abbastanza per farlo funzionare, ma si potrebbe anche nido il input all'interno del label, in questo modo:

<label for="agree"> 
    <input type="checkbox" name="agree" /> 
    Accept the terms 
</label> 

Tuttavia, la maggior parte delle persone evitare di fare questo perché è semanticamente costrittivo. Vorrei andare con il primo metodo.

Answer 6

Imposta una classe nella lista casella di controllo come segue:

<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList> 

quindi aggiungere il seguente CSS:

.FilterCheck td { 
    white-space:nowrap !important; 
} 

questo modo si garantisce l'etichetta rimane sulla stessa linea la casella di controllo.

Answer 7

Ho avuto lo stesso problema con il bootstrap 3 in forma orizzontale, e alla fine ho trovato una soluzione try-error e funziona anche con html-css. Controllare il mio Js Fiddle Demo

.remember { 
 
    display: inline-block; 
 
} 
 
.remember input { 
 
    position: relative; 
 
    top: 2px; 
 
}

<div> 
 
    <label class="remember" for="remember_check"> 
 
     <input type="checkbox" id="remember_check" /> Remember me 
 
    </label> 
 
</div>

Answer 8

provato il flex attribute? Ecco your example with flex aggiunto:

1. HTML

   <div id="right_sidebar"> 
   <form id="send_friend" name="send_friend" action="#" method="post" style="display: block; "> 
   <fieldset> 
       <label for="from">From</label> 
       <input type="text" name="from" id="from" value=""> 
       <label for="to">To</label> 
       <input type="text" name="to" id="to"> 
       <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a> 
       </label> 
       <textarea name="msg" id="msg" rows="7"></textarea> 
       <div class="row"> 
        <div class="cell" float="left"> 
         <input type="checkbox" name="agree"> 
        </div> 
        <div class="cell" float="right" text-align="left"> 
         <label for="agree">Accept the terms</label> 
        </div> 
       </div> 
       <button class="blue_button" type="submit">Send</button> 
   </fieldset> 
   </form> 
   </div> 
   

2. CSS

   body { 
       color: #333; 
       font: 12px Arial, Helvetica Neue, Helvetica, sans-serif; 
   } 
   [class="row"] { 
       display: flex; 
       flex-flow: row wrap; 
       margin: 2 auto; 
   } 
   [class="cell"] { 
       padding: 0 2px; 
   } 
   #right_sidebar { 
       padding-top: 12px; 
       width: 190px; 
       position:relative; 
   } 
   form { 
       background: #EEF4F7; 
       border: solid red; 
       border-width: 1px 0; 
       display: block; 
       margin-top: 10px; 
       padding: 10px; 
   } 
   form label { 
       color: #435E66; 
       display:block; 
       font-size: 12px; 
   } 
   form textarea { 
       border: 1px solid #ABBBBE; 
       margin-bottom: 10px; 
       padding: 4px 3px; 
       width: 160px; 
       -moz-border-radius: 3px; 
       border-radius: 3px; 
   } 
   form label a { 
       display: block; 
       padding-left: 10px; 
       position: relative; 
       text-decoration: underline; 
   } 
   form label a .sp { 
       background: #EEF4F7; 
       height: 0; 
       left: 0; 
       position: absolute; 
       top: 2px; 
       width: 0; 
       border-top: 4px solid transparent; 
       border-bottom: 4px solid transparent; 
       border-left: 4px solid #333; 
   } 
   form button.blue_button { 
       margin-top: 10px; 
       vertical-align: top; 
   } 
   button.blue_button { 
       color: white; 
       font-size: 12px; 
       height: 22px; 
       -webkit-border-radius: 3px; 
       -moz-border-radius: 3px; 
       border-radius: 3px; 
   } 
   button.blue_button { 
       background-color: #76C8C6; 
       border: 1px solid #7798B7; 
       text-shadow: 1px 1px 0px #567C9E; 
   } 
   

Flex consente un controllo stile di tabella con l'utilizzo di div per esempio.

Answer 9

Il modo più semplice che ho trovato per avere la casella di controllo e l'etichetta allineato è:

.aligned { 
 
     vertical-align: middle; 
 
    }

<div> 
 
     <label for="check"> 
 
      <input class="aligned" type="checkbox" id="check" /> align me 
 
     </label> 
 
    </div> 
 
    <div> 
 
     <input class="aligned" type="checkbox" /> 
 
     <label>align me too</label> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox" /> 
 
     <label>dont align me</label> 
 
    </div>

Answer 10

So che questo post è vecchio, ma mi piacerebbe aiutare coloro che vedranno questo in futuro. La risposta è molto semplice.

<input type="checkbox" name="accept_terms_and_conditions" value="true" /> 
 
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>