在标签前输入输入

Question

我有一个大问题.
我的任务是在CMS(JTL)中的自定义页面上设计自定义表单.我正在使用插件来创建此表单.问题是标签位于复选框的前面.这导致非常糟糕的布局.我无法在HTML代码中更改标签的位置,因此不得不使用CSS,因为我不允许使用JS.

这基本上是HTML:

<li>Question<br/>
<label for="option1">Option 1</label><input id="option1" type="checkbox" /><br/>
<label for="option2">Option 2</label><input id="option2" type="checkbox" /><br/>
<label for="option3">Option 3</label><input id="option3" type="checkbox" /></li>

因为我的任务是让它看起来不惜任何代价(只是不重新安排HTML而不使用JS),因此CSS变得非常重要并不重要.

Answer 1

您可以float在输入中使用该属性.

由于复选框位于标签之后,浮动将影响下一个元素,因此不要忘记清除浮动使用clear,否则会弄乱你的视觉!

input[type="checkbox"] {
  float: left;
  clear: both;
}

<label for="option1">Option 1</label><input id="option1" type="checkbox" /><br/>
<label for="option2">Option 2</label><input id="option2" type="checkbox" /><br/>
<label for="option3">Option 3</label><input id="option3" type="checkbox" />