标签文本换行但第二行没有缩进

Question

我有一个宽度受限的表单，但标签文本可能比表单宽度更长，因此文本会被换行成多行。我的问题是第一行因为输入元素而缩进，但第二行却没有，这使得表单不好看。

你有任何想法可以使得第二、第三行等都像第一行一样缩进，只使用CSS吗？

实际效果：

期望效果：

这是我的案例：

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

- Khoi Nguyen

---

关于您编写的代码出现问题的问题必须在问题本身中描述具体的问题，并包含可重现问题的有效代码。 - Jukka K. Korpela

嗨@JukkaK.Korpela，我也发布了示例链接。 - Khoi Nguyen

我仍然看不到问题中的代码。 - Jukka K. Korpela

可能是Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?的重复问题。 - matt.

Answer 1

类似这样的内容。

.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>

- Дима Телси

---

这是我认为最好、最简单的解决方案，运行良好。非常感谢。 - AlphaX

Answer 2

像这样编辑你的css：

.form {
  width: 300px;
}
label {
  display: block;
  margin-top: -20px;
  margin-left: 20px;
}

- Marinus

Answer 3

text-indent 只对第一行起作用，如果你想要所有行都缩进，你应该使用 padding 并且通过复选框输入来调整 float：

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

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

这里有一个 jsfiddle。

- Hamed mayahian

---

没有 paddring-right 属性，而 padding-right 是在右侧添加填充，而不是左侧。 - Jukka K. Korpela

@Radian 你自己测试过吗？由于信息太少，我建议在标签上加填充。但是这并不容易，你看：http://jsbin.com/OSEcoXu/1 :) - nkmol

这里有一个针对你的JSfiddle链接，你应该给你的代码添加一些浮动和宽度：http://jsfiddle.net/G87Js/1/ - Hamed mayahian

@Radian 我会建议你把这个放在你的答案里，因为你的正式答案不起作用 :) 问题提出者可能不知道他必须使用浮点数。 - nkmol

Answer 4

你可以这样做：

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 代替 ul。

- Jarno

Answer 5

这是我发现的更简单、更优雅的解决方案：

ul { margin-left: 1em; }
li { text-indent: 1em hanging; }

- Carlos Borges

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community