Question

我有此复选框列表，我想使用Django形式的CSS或attrs将其分成多行。主要是CheckboxSelectMultiple

这是forms.py的代码：

town = forms.ModelMultipleChoiceField(Town.objects.all(),
                                      widget=forms.CheckboxSelectMultiple(
                                          attrs={
                                              'style': 'vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;'
                                          }
                                      )
                                      )

这就是现在的样子：

每次添加更多选择时，同一垂直线都会不断增加

渲染的HTML

      <div align="left">
      Choose up to 5 images for the Ad, at least 1 is required : <br><br>
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <br><br>
          Chose in which town is this ad available ( Can pick more than one) :<br>
      <ul id="id_town">
    <li><label for="id_town_0"><input type="checkbox" name="town" value="1" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_0" />
 Town  1</label>

</li>
    <li><label for="id_town_1"><input type="checkbox" name="town" value="2" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_1" />
 Town 2</label>

</li>
    <li><label for="id_town_2"><input type="checkbox" name="town" value="3" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_2" />
 Town 3</label>

</li>
    <li><label for="id_town_3"><input type="checkbox" name="town" value="4" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_3" />
 town 4</label>

</li>
    <li><label for="id_town_4"><input type="checkbox" name="town" value="5" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_4" />
 town 5</label>

</li>
</ul>
              </div>

Answer 1

更难的方法是更改Django渲染这些复选框的方式（它们当前在列表中），而我对此无能为力（您可能不得不问另一个问题），更简单的方法是编写一些CSS来更改现有内容的外观。在这种情况下，类似这样的方法应该起作用：

#id_town {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

#id_town li {
  float: left;
}

<div align="left">
      Choose up to 5 images for the Ad, at least 1 is required : <br><br>
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <br><br>
          Chose in which town is this ad available ( Can pick more than one) :<br>
      <ul id="id_town">
    <li><label for="id_town_0"><input type="checkbox" name="town" value="1" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_0" />
 Town  1</label>

</li>
    <li><label for="id_town_1"><input type="checkbox" name="town" value="2" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_1" />
 Town 2</label>

</li>
    <li><label for="id_town_2"><input type="checkbox" name="town" value="3" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_2" />
 Town 3</label>

</li>
    <li><label for="id_town_3"><input type="checkbox" name="town" value="4" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_3" />
 town 4</label>

</li>
    <li><label for="id_town_4"><input type="checkbox" name="town" value="5" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_4" />
 town 5</label>

</li>
</ul>
              </div>

如何在复选框列表中断开垂直线

1 个答案: