Форматирование элементов в столбцах и строках - PullRequest
Новая
       0

Форматирование элементов в столбцах и строках

4 голосов
/ 03 августа 2010

Чтобы не изобретать велосипед, я создаю форму с помощью помощника по форме 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 или мне придется манипулировать DOM с помощью JS (или изменить разметку с помощью PHP, прежде чем я ее выведу)?

Ответы [ 2 ]

10 голосов
/ 03 августа 2010

Вы можете использовать следующий CSS: 

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

(1% для вопросов округления; при желании уменьшите ширину и увеличьте margin-right. Вы также можете использовать значения в пикселях, конечно)

Это распределит флажки и их метки по трем столбцам.Однако с длинными метками, которые переносятся на несколько строк, могут возникнуть проблемы с распространением (попробуйте, чтобы понять, что я имею в виду).

Чтобы предотвратить это, присвойте каждому третьему столбцу дополнительный класс newline: 

<div class="checkbox newline">

и определите в CSS: 

div.checkbox.newline { clear: left }
0 голосов
/ 16 мая 2016

Свойство подсчета столбцов в CSS очень полезно.Если вы ставите разрыв строки после каждого элемента формы, вы можете сделать довольно чистую презентацию.Кроме того, добавляя <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...