14

我有一个宽度有限的表单，但是标签文本可能比表单宽度长，所以文本被换成了多行。我的问题是第一行是由于输入元素而缩进的，但第二行不是，这使得表单不好。

你有什么想法让第二，第三......将作为第一行缩进，只使用CSS？

实际的：

在此处输入图像描述

我的期望是

在此处输入图像描述

这是我的案例示例：

http://jsbin.com/UvaqISO/2/edit

4

4 回答 4

9

像这样编辑你的css：

.form {
  width: 300px;
}
label {
  display: block;
  margin-top: -20px;
  margin-left: 20px;
}
于 2013-12-04T09:07:47.030 回答
8

像这样的东西。

.checkbox-field {
    display: flex;
    flex-direction: row;
}
<div class="checkbox-field">
    <input type="checkbox" id="check">
    <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div>

于 2020-09-04T07:13:43.363 回答
1

你可以这样做：

HTML

<form class="form">
    <ul>
        <li>
          <input id="inputField">
          <label for="inputField">Field 1</label>
        </li>
        <li class="checkbox">
            <input type="checkbox" id="input2">
            <label for="input2">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
        </li>
        <li class="checkbox">
            <input type="checkbox" id="input3">
            <label for="input3">Field 3 Normal long</label>
        <li>
    </ul>
</form>

CSS

.form {
  width: 300px;
}

.form ul {
  list-style:none;
  padding: 0;
}

.form ul li {
  overflow:hidden;
}

.form ul li.checkbox input {
  float:left;
}

.form ul li.checkbox label {
  float:right; 
  width:270px;
}

您也可以使用div's 代替ul.

于 2013-12-04T08:46:27.853 回答
1

text-indent刚刚在第一行生效，如果你想缩进所有行，你应该使用padding并使用复选框输入float：：

     .form {
    width: 300px;
  }
#input2{
    float:left;

}
#input2 + label
{
  padding-left: 30px;
display: block;
}

这是一个jsfiddle

于 2013-12-04T07:51:51.753 回答