Question

我有一个大问题我的任务是在CMS（JTL）中的自定义页面上设计自定义表单。我使用plugin来创建此表单。问题是标签位于复选框的前面。这导致非常糟糕的布局。我不能在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>

如果CSS变得很庞大并不重要，因为我的任务是让它看起来不惜任何代价（只是没有重新安排HTML而不使用JS）。

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" />

Answer 2

您可以将<label>向右浮动，然后为每个<li>添加固定宽度

http://jsfiddle.net/ctkhyoy7/

Answer 3

您可以在复选框中添加一个float：left属性。

CSS：

input {
    float: left;
}

Jsfiddle：http://jsfiddle.net/yzeLpgj0/

Answer 4

您可以在css http://jsfiddle.net/2ynyb4aL/

中更改此设置

label{
position:absolute;
margin-left:20px;
}

Answer 5

这应该可以帮到你：http://www.webcredible.com/blog-reports/css/css-forms.shtml？

或尝试使用：

<style type="text/css">
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
</style>

在标签前输入输入

5 个答案: