Przenieś znacznik HTML do lewej strony jego szerokości.

Question

Nie mogę użyć żadnego skryptu JavaScript i chciałbym otrzymać odpowiedź tylko w CSS, jeśli jest to możliwe. Mam pole poniższy wyboru w formie:

<label for="autologin">Remember Me</label> 
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
<div class="clear"></div> 

z następującym CSS:

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
} 

.clear { 
    clear: both; 
} 

Co CSS mogę dodać do check-box, aby pojawić się na lewej stronie jego Szerokość 200px? Trochę mi dokuczają pływaki (w szczególności pionowe ustawienie), ale słyszę, że to właściwa praktyka.

EDYCJA: OK, więc wiele osób sugeruje, aby nie przenosić danych wejściowych po prawej stronie. Jeśli tak, to równie dobrze mogę nie używać pływaka w ogóle i po prostu ustawić szerokość etykiety i mieć po każdej linii
. Czy byłaby to akceptowalna praktyka, czy też po prostu tęsknię - używając tu pływaków?

Answer 1

spróbować, oto demo link

label { 
    float:left; 
    margin: 5px 0px; 
} 

input { 
    // float right; 
    margin: 5px 0px; 
    width: 200px; 

} 

.clear { 
    clear: both; 
} 

Answer 2

Do tego tabela jest w porządku, ponieważ dane tabelaryczne są dostarczane przez użytkownika. To rozwiąże również problemy z pionowym wyrównaniem.

Niestety, nie można umieścić pola wyboru po lewej stronie jego szerokości. Osobiście polecam unikanie stylizacji input bez określania [type=something]. Jeśli jednak wiele typów wejść HTML5 używać takich jak email, number, url etc wtedy może się okazać, że warto stylu wszystkie input w jeden sposób, a następnie użyć width:auto dla [type=radio] i [type=checkbox]

Answer 3

Ustaw jego szerokość lubić 20px, to rozwiązuje problem. To nie musi być 200px to robi?

Answer 4

Nie "przesuń go na lewo od szerokości" - niech dyktuje swoją własną szerokość, a następnie dodaj dopełnienie po prawej stronie, jeśli jej potrzebujesz. Ale sądząc po twoim projekcie, nie.

input[type=checkbox] { width: auto }

Answer 5

Jeśli używasz atrybutu pływaka oznacza, musisz podać szerokość do kontenera formularza.

Answer 6

Powinieneś usunąć float: right; i width: 200px; ze swojej deklaracji klasy input. I ustawiłbym szerokości dla wszystkich etykiet (tj. 200px), aby wyrównać drugą kolumnę.

label { 
    float: left; 
    margin: 5px 0px; 
    width: 200px; 
} 

input { 
    /*float: left;*/ /* This will also work. */ 
    margin: 5px 0px; 
} 

.clear { 
    clear: both; 
} 

Zobacz jsFiddle Example.

Answer 7

Myślę, że problem powodujący, że twoje pole wyboru ma takie centrum, ponieważ ustawiłeś wejście width:200px, więc wszystko, co musisz zrobić, to dodać width:auto do twojego pola wyboru przez jego id (autologin). Musisz również utworzyć kontener div dla swojego pola wyboru.Oto HTML:

<label for="autologin">Remember Me</label> 
<div id='check'><input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"></div> 
<div class="clear"></div> 

i tutaj jest CSS:

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
    border:solid 1px; 
} 
#autologin 
{ 
width:auto; 
float:left; 
} 
#check 
{ 
float:right; 
width:200px; 
border:solid 1px; 
} 

.clear { 
    clear: both; 
} 

Nadzieja to pomaga :)

Answer 8

Można wyrównaj lub zmień kierunek pola wyboru, ponieważ nie ma załącznika, to tylko pudełko.

W celu, aby to zrobić wystarczy umieścić go w div i dać div ten styl:

.checkDIV 
{ 
    text-align:left; 
} 

przykład:

<div align="center" class="checkDIV"> 
    <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
</div>