Question

那是我的代码

    <form class="contactForm">
        <label> Your name
          <input type="text" name="name" placeholder="Your name">
        </label>
      </form>

我希望输入元素显示在标签元素下方。以为它是一个块元素的问题，但是当我在css输入或标签中显示为块样式时，什么也没有发生。感谢您的帮助

Answer 1

设置了<span>的{{1}}应该可以解决问题-与使用display: block不同，它是有效的HTML。只要确保父标签仍未设置为<div>-这是默认设置即可。

示例：

display: inline

label,
label > span {
  display: block;
}

Answer 2

<br />的作品吗？

    <form class="contactForm">
        <label> Your name
          <br />
          <input type="text" name="name" placeholder="Your name">
        </label>
      </form>

Answer 3

虽然可以通过这种方式设置标签，但请尝试使其成为输入的同级而不是父级。另外，为其赋予for属性以匹配输入的name属性。

<form class="contactForm">
        <label for="name">Your name</label>
        <input type="text" style="display:block" name="name" placeholder="Your name">
</form>

这样使用标签后，您可以看到display:block可以正常工作。只是想补充：在最终解决方案中，直接使用style标签是不明智的做法，我建议创建易于理解的CSS类。

希望有帮助。

Answer 4

position()

Answer 5

标签中的文本没有标签。如果添加let task = Task(content: "Foo", deadline: Date(), color: .orange) do { let data = try JSONEncoder().encode(task) print(String(data: data, encoding: .utf8)!) let newTask = try JSONDecoder().decode(Task.self, from: data) print(newTask) } catch { print(error) }，则可以为其添加一些样式。

<span>

label span{
  display: block;
}

Answer 6

您只需要使用div

中的输入字段

<form class="contactForm">
        <label> Your name </label>
        <div>
          <input type="text" name="name" placeholder="Your name">
        </div>
      </form>

以格式

6 个答案: