登錄表單，複選框後的文本

我正在爲學校項目做一個登錄表單，出於某種原因，我無法在沒有任何元素移動的複選框之後放置文本。我在複選框上嘗試了display: inline屬性，但仍然無法正常工作。那裏應該是文字「記住我？」在複選框後。以下是演示：http://jsfiddle.net/sa6y8epc/登錄表單，複選框後的文本

來源

2015-11-02 S.Yankov

您正在設置所有相同的輸入樣式包括複選框..嘗試設置此：input [type = checkbox] {width：auto;高度：汽車;} - 調整您的需求 –

更新的小提琴：http://jsfiddle.net/sa6y8epc/3/ –

我認爲問題是'float：left'。但不僅.. –

設置爲.login-div input的規則也適用於該複選框。改變這種狀況，並刪除float: left從#checkbox

.login-div input[type=text], 
.login-div input[type=password] { 
    display: block; 
    margin-top: 10px; 
    border: 1px solid #b3b3b3; 
    border-radius: 2px; 
    width: 245px; 
    height: 22px; 
    padding: 2px; 
    padding-left: 8px; 
} 

#checkbox { 
/*float: left;*/ 
}

UPDATED FIDDLE

來源

2015-11-02 12:34:59 LinkinTED

這對於他們來說是最好的 –

只是調整複選框，E。 g .:

#checkbox { 
    width: 10px; 
}

然後，基本上，文本在複選框的右側。

演示：JSFiddle

來源

2015-11-02 12:35:52 KittMedia

這裏是一個工作的jsfiddle：http://jsfiddle.net/sa6y8epc/2/

首先添加標籤的複選框後：

<label for="checkbox" id="checkbox-label">Remember me?</label>

而在這之後添加此CSS：

.login-div { 
    text-align: center; 
} 

#checkbox { 
    float: none; 
    width: auto; 
    display: inline-block; 
} 

#checkbox-label { 
    font-size:12px; 
    display: inline-block; 
    vertical-align: top; 
    margin-top: 13px; 
    color: #fff; 
}

來源

2015-11-02 12:36:56

您可以將複選框和文本放在標籤ele中（如果你點擊記住文本，複選框也會被點擊。）。請使用下面的代碼。

<label id="lbl-chkbx"><input type="checkbox" name="radio" id="checkbox"> Remember me </label> 


input[type=checkbox]{ width: auto; height: auto;} 
#lbl-chkbx{ vertical-align:-webkit-baseline-middle;}

來源

2015-11-02 12:42:21

登錄表單，複選框後的文本

回答

相關問題