將字段集中的複選框分成兩列

我想將使用CSS的相同字段集中的複選框分成兩列。將字段集中的複選框分成兩列

例如，我的代碼如下：

<div id="topicsbox"> 
    <label class="topicsname">Topics*</label> 
    <label class="description">Select topic areas for which you would like to receive future updates from CTU (articles, blog posts, white papers, etc.). Check all that apply:</label> 
    <div id="topicsmessage" class="messagebox"></div> 

    <fieldset> 
     <input type="checkbox" name="topics[]" id="AllTopStories" value="1098375" /><label for="AllTopStories">All Top Stories</label> 
     <input type="checkbox" name="topics[]" id="BusinessandManagement" value="1098376" /><label for="BusinessandManagement">Business and Management</label> 
     <input type="checkbox" name="topics[]" id="CareerandProfessional" value="1098377" /><label for="CareerandProfessional">Career and Professional</label> 
     <input type="checkbox" name="topics[]" id="CriminalJustice" value="1098378" /><label for="CriminalJustice">Criminal Justice</label> 
     <input type="checkbox" name="topics[]" id="HealthcareAdministration" value="1098379" /><label for="HealthcareAdministration">Healthcare Administration</label> 
     <input type="checkbox" name="topics[]" id="HomelandSecurity" value="1098380" /><label for="HomelandSecurity">Homeland Security</label> 
     <input type="checkbox" name="topics[]" id="ITEngineeringComputerScience" value="1098381" /><label for="ITEngineeringComputerScience">IT, Engineering, Computer Science</label> 
    </fieldset> 
</div>

有誰知道正確的CSS分裂這個列表插入右邊的左邊和3 4個輸入複選框？

來源

2012-10-13 codeadventurer

浮動左半右半。 – j08691

如果你設置字段集和輸入/標籤字段的寬度然後將它們浮動，該怎麼辦？ – jtheman

'column-count：2'？ – Jon

如何設置輸入和標籤的CSS如下：

設置適當的寬度
套裝顯示：inline-block的

這樣就逃避了明確的div需要你只需要將它們懸浮起來就可以了

你也可以去看看CSS3的解決方案

-moz-column-count:2; /* Firefox */ 
-webkit-column-count:2; /* Safari and Chrome */ 
column-count:2;

來源

2012-10-13 22:26:12 Hisham

CSS中的列數屬性非常有幫助。如果你在每個表單元素之後放一個換行符，你可以做一個非常乾淨的表示。另外，通過添加< span style =「white-space：nowrap;」 >，它使標籤貼在複選框元素上

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.newspaper { 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
} 
</style> 
</head> 
<body> 

<p>Here are a bunch of check boxes and their labels laid out nicely 
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p> 

<div class="newspaper"> 

<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some topic" id="some id" /><label for="stuff about a topic">something for you to read</label></span><br/> 

</div> 

</body> 
</html>

來源

2016-05-16 01:07:34 CAtoOH

將字段集中的複選框分成兩列

回答

相關問題