排隊列表與複選框

現在我有這樣的HTML代碼：排隊列表與複選框

<ul> 
    <li> 
    <input checked="checked" id="user_remember_me" name="user[remember_me]" type="checkbox" value="true"> 
    <div class="login-link"> 
     Запомнить меня 
    </div> 
    </li> 
    <li> 
    <a href="https://stackoverflow.com/users/sign_up" class="login-link">Регистрация</a> 
    </li> 
    <li> 
    <a href="https://stackoverflow.com/users/sign_up" class="login-link">Забыли пароль?</a> 
    </li> 
</ul>

都在這裏： http://jsfiddle.net/4GtKQ/

也看到圖像：

但爲什麼我收到「Запомнитьменя」和「Регистрация」之間的這種距離？如何設置它們在正常的線網格？

來源

2012-12-21 brabertaser19

我無法看到圖像和關係，即小提琴頁 –

@MarkSchultheiss調整中的jsfiddle – brabertaser19

預覽子窗口爲什麼要關閉？問題很好！問題通常被描述！ – brabertaser19

複選框和關聯的文本佔據了不同數量的垂直空間。你指着額外的空間是兩個元素沿其箱的頂邊排隊的結果。

假設你想要的文字和輸入具有相同的基線和與左邊緣與右邊緣對齊複選框對齊文本，成品標記和CSS會是這樣的：

HTML：

<li class="remember"> 
    <label>Запомнить меня 
    <input checked="checked" id="user_remember_me" name="user[remember_me]" 
      type="checkbox" value="true"> 
    </label> 
</li>

CSS：

li.remember { 
    text-align: left; 
} 
li.remember input { 
    float: right; 
}

http://jsfiddle.net/4GtKQ/1/

來源

2012-12-21 21:14:51 cimmanon

謝謝，你也可以看看我的頁腳嗎？爲什麼在每個頁面上它的邊距都是不一樣的？ – brabertaser19

這顯然是因爲複選框的，我相信你能得到它周圍的方式，但我建議您將它們分離出來是單獨的元件，然後排隊它們與CSS。複選框不一定要有與其關聯的標籤，只要確保它對具有輔助功能需求的用戶具有標題即可。

對不起，我不能給你一個確切的解決方案，如果你可以提供一個真正的網址（完整的網頁），我認爲在這種情況下，更多的迴應，因爲我們可以使用諸如Chrome的Inspect Element之類的東西。 JSfiddle不錯，但這是一個例外。

來源

2012-12-21 21:04:24

有沒有很好的理由*不*有一個複選框相關的'label'。擁有與複選框關聯的「標籤」可以極大地提高可用性，特別是對於靈巧性較差的用戶（文本塊比點擊複選框更容易點擊）。 – cimmanon

它是從青菜+ HAML – brabertaser19

我原則上同意，這的確應該有一個標籤產生的，但在這種情況下，我要說的是，你可以花很長的時間與此擺弄，並在轉圈圈（我的作者已經完成）。 –

-3

<li style="position:relative; top: -5px;"> 
<a href="https://stackoverflow.com/users/sign_up" class="login-link">Регистрация</a> 
</li>

來源

2012-12-21 21:14:16 HMarioD

永遠不會使用相對定位來解決這種問題，其中明文流可以以非常好的方式解決所有問題。 – s1lence

排隊列表與複選框

回答

相關問題