格式元素和行

爲了避免重新發明輪子，我生成使用CakePHP的形式助手，這創建了下面的標記的一種形式：格式元素和行

<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  [] ...

我可以使用CSS來完成此操作嗎？還是我必須使用JS操作DOM（或者在輸出之前使用PHP更改標記）？

來源

2010-08-02 NullUserException

您可以使用下面的CSS：

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

（1％是四捨五入的問題;減少寬度，增加margin-right，你認爲合適，您還可以使用過程中的像素值。）

這將在三列中分配複選框及其標籤。但是，對於包裝多行的長標籤，您可能會遇到分發問題（試試看看我的意思）。

爲了防止這種情況，給每3列附加類newline：

<div class="checkbox newline">

和CSS定義：在CSS

div.checkbox.newline { clear: left }

來源

2010-08-02 20:07:03

工程很棒;不得不在其他地方改變一些CSS，但形式仍然看起來好 – NullUserException 2010-08-02 20:29:52

感謝換行提示，爲我節省了一些頭痛 – Mercurybullet 2012-06-14 22:30:22

的列數屬性是非常有益的。如果你在每個表單元素之後放一個換行符，你可以做一個非常乾淨的表示。此外，通過添加<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>

來源

2016-05-16 01:01:07 CAtoOH

格式元素和行

回答

相關問題