對齊兩個事業部盒

-2

我需要顯示四位複選框如下對齊兩個事業部盒

 A   B 
     C   D

應該有兩根中的每一行？任何人都可以提出什麼是正確的CSS呢？他們需要在裏面或組合Div

來源

2013-07-08 InTheWorldOfCodingApplications

你嘗試過什麼嗎？ – Sachin

那麼這些A B C D是4格，其中每個部門包含「1複選框+ 1文字說明」？ – Stano

你可以把每個盒子放在div中，會有兩種div，一個是'float：left'，另一個是'float：right'，你給它們一些寬度，就是這樣！ –

<style> 
    .item {white-space: nowrap;display:inline; } 
</style> 
<fieldset> 
<div class="item"> 
    <input type="checkbox" id="a"> 
    <label for="a">a</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="b"> 

    <label for="b">b</label> 
</div> 
<br/> //link break or anything you like 
<div class="item"> 
    <input type="checkbox" id="c"> 
    <label for="c">c</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="c"> 
    <label for="c">D</label> 
</div> 
</fieldset>

這應該適用於你稍微輕微的變化，如果你覺得。謝謝。

來源

2013-07-08 10:56:27 Chiragit007

如果這只是一個固定的文件，不需要內容管理，我會使用列以方便使用。如果它需要內容管理和內容可能會改變，那麼我會去處理行。

http://jsfiddle.net/FUJMS/5/

HTML：

<html> 

    <div class="column one"> 
     <div class="box A"></div> 
     <div class="box C"></div> 
    </div> 

    <div class="column two"> 
     <div class="box B"></div> 
     <div class="box D"></div> 
    </div> 

</html>

CSS：

div.column { 
    width:50%; 
} 

div.column.one { 
    float:left; 
} 

div.column.two { 
    float:right; 
} 

div.box { 
    width:40px; 
    height:40px; 
}

來源

2013-07-08 10:59:08 InsomniaBass

在css中沒有第二列 – InTheWorldOfCodingApplications

我知道，它應該填充空格並且符合 - 浮動元素。現在你已經提到它了，我開始懷疑自己，無論哪種方式，第二個只需要應用一個浮動。 – InsomniaBass

完成，只需要我說的浮動。我錯過了';'在寬度之後，這讓我有點不安。 – InsomniaBass

一個可能的解決方案是將複選框標籤標籤內

<label for="cb1"><input id="cb1" name="cb1" type="checkbox" /> checkbox1 </label> 
<label for="cb2"><input id="cb2" name="cb2" type="checkbox" /> checkbox2 </label> 
<label for="cb3"><input id="cb3" name="cb3" type="checkbox" /> checkbox3 </label> 
<label for="cb4"><input id="cb4" name="cb4" type="checkbox" /> checkbox4 </label>

和風格化它如下

label { 
    display:block; 
    width:50%; 
    *width:49%; /*for IE7 only*/ 
    float:left; 
} 
label[for="cb3"] { 
    clear:left; 
}

感謝利亞姆呼籲關注這個SO問題：Should I put input tag inside label tag?。
現在答案與屏幕閱讀器和IE7兼容。

jsfiddle

來源

2013-07-08 11:07:39 Stano

這是個好主意嗎？我不相信一個標籤應該包含輸入 – Liam

是的，你可以http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag。但它對我來說很骯髒... – Liam

我不知道把任何東西放在''內是有效的。每天學些新東西！ –

對齊兩個事業部盒

回答

相關問題