fieldset의 확인란을 두 개의 열로 나누십시오.

동일한 필드 세트의 확인란을 CSS를 사용하여 두 개의 열로 나누려고합니다. 예를 들어fieldset의 확인란을 두 개의 열로 나누십시오.

, 내 코드는 다음과 같습니다 :

<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>

사람이 오른쪽에 왼쪽 3 4 개 입력 체크 박스에이 목록을 분할 할 수있는 올바른 CSS를 알고 있나요?

출처

2012-10-13 codeadventurer

플로트 절반 왼쪽 및 오른쪽 절반. – j08691

필드 세트 및 입력/레이블 필드의 너비를 설정 한 다음이를 플로팅하면 어떨까요? – jtheman

'column-count : 2'? – Jon

방법은 다음과 같이 입력 및 라벨에 대한 CSS를 설정하는 방법에 대한 :

설정 적절한 폭
설정 디스플레이 : 인라인 블록 당신이 명확한 사업부의 필요성을 피할 수 있도록

그냥 떠 다니는 경우에 당신이 필요로 할 것입니다.

-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

fieldset의 확인란을 두 개의 열로 나누십시오.

답변

관련 문제