代码之家 › 专栏 › 技术社区 › NullUserException Mark Roddy

格式化列和行中的元素

formatting css

NullUserException Mark Roddy · 技术社区 · 15 年前

为了避免重新发明轮子,我使用CakePHP的form helper生成了一个表单,它创建了以下标记:

    <div class="input select"><label for="ReportFruit">Fruit</label>
        <input type="hidden" name="data[Report][Fruit]" value="" id="ReportFruit" /> 

<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="0" id="ReportFruit0" /><label for="ReportFruit0">Banana</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="1" id="ReportFruit1" /><label for="ReportFruit1">Apple</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="2" id="ReportFruit2" /><label for="ReportFruit2">Pear</label>
...
</div> 
</div>â

[] Banana
[] Apple
[] Pear
[] ...

我想格式化它们,使其显示如下:

[] Banana    [] Apple     [] Pear
[] Mango     [] Lemon     [] ...

2 回复 | 直到 15 年前

Pekka 15 年前

div.checkbox { float: left; width: 31%; margin-right: 1% }

(1%用于四舍五入问题;减小宽度并增大 margin-right 你认为合适的。当然,也可以使用像素值)

这将在三列中分布复选框及其标签。但是,对于跨多行的长标签,您可能会遇到分发问题(试试看我的意思)。

newline :

<div class="checkbox newline">

并在CSS中定义:

div.checkbox.newline { clear: left }

Benjamin W. 9 年前

<span style="white-space: nowrap;">

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}
</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 value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>

</div>

</body>
</html>