3

CSSを使用して、同じフィールドセットのチェックボックスを2つの列に分割しようとしています。

たとえば、私のコードは次のとおりです。

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

このリストを左側の4つの入力チェックボックスと右側の3つの入力チェックボックスに分割する正しいCSSを知っている人はいますか？

4

2 に答える 2

3

入力とラベルのcssを次のように設定するのはどうですか。

  • 適切な幅を設定する
  • 表示の設定：インラインブロック

フローティングする場合に必要となる明確なdivの必要性を回避するため

また、CSS3ソリューションに行くことができます

-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
于 2012-10-13T22:26:12.987 に答える
0

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-16T01:07:34.487 に答える