Displaying CheckboxSelects Horizontally

[Little_Grungy]

Hi

I have the following form for a list of languages:

class Languages(forms.Form):

language_list = (('python', 'python'), ('c', 'c'), ('java', 'java'),
('c++', 'c++'), ('php', 'php'), ('perl',
'perl'))

languages = forms.MultipleChoiceField(label='Languages',
required=True,
widget=forms.CheckboxSelectMultiple,
choices=language_list)

When I render the form in my template as follows:

<table>
{{ form }}
</table>

The HTML is generated as follows:

<tr>
<th>
<label for="id_languages_0">
Languages:
</label>
</th>
<td>
<ul>
<li>
<label>
<input type="checkbox" name="languages" value="python"
id="id_languages_0" />
python
</label>
</li>
<li>
<label>
<input type="checkbox" name="languages" value="c"
id="id_languages_1" />
c
</label>
</li>
<li>
<label>
<input type="checkbox" name="languages" value="java"
id="id_languages_2" />
java
</label>
</li>
<li>
<label>
<input type="checkbox" name="languages" value="c++"
id="id_languages_3" />
c++
</label>
</li>
<li>
<label>
<input type="checkbox" name="languages" value="php"
id="id_languages_4" />
php
</label>
</li>
<li>
<label>
<input type="checkbox" name="languages" value="perl"
id="id_languages_5" />
perl
</label>
</li>
</ul>
</td>
</tr>

Is there any way to have the checkboxes (and also the same for radio
buttons) rendered horizontally, ideally within one cell in a table? I
cannot find a way to do this.

Thank you

[Matt McClanahan]

On Feb 26, 12:57 pm, Little_Grungy <littlegru...@gmail.com> wrote:

> Is there any way to have the checkboxes (and also the same for radio
> buttons) rendered horizontally, ideally within one cell in a table? I
> cannot find a way to do this.

CSS is your friend.

ul { list-style-type: none; margin: 0; padding: 0; }
li { float: left; }

Matt