javascript - 在我的表单输入旁边添加一个具有动态大小的标签

Question

经过几次尝试，我设法创建了 these形成看起来非常漂亮的文本区域(或者我认为如此)。

<div class="col-lg-6">
    <form class="cf">
    <div class="">
      <header class="">Name</header>
      <input class="shadowDepth1" type="text" id="input-name" placeholder="Name">
      <header>Email</header>
      <input class="shadowDepth1" type="email" id="input-email" placeholder="Email address">
      <header>Subject</header>
      <input class="shadowDepth1" type="text" id="input-subject" placeholder="Subject">
    </div>
  </form>
  </div>

我认为下一步是在每个描述输入的旁边添加一个标签。

我想要的是让标签看起来像输入(可能是粗体或不同的颜色)但动态占据空间。

因此，如果标签的内容很大，那么它会推送旁边的输入，以容纳自己。

一个比较接近的例子是 this影响。

如何在标签和输入之间建立这种动态关系？

编辑:

This基本上是输入的想法。我认为因为 input 宽度为 100%，即使使用 float: left，它也不会靠近我的标签。使其宽度为例如。 70% 会解决问题，但会删除动态部分。因为最后我希望我所有的文本输入都在同一区域结束。

Answer 1

您可能需要将元素向右浮动。首先切换输入和标题的顺序(因此输入在前)，因为向右浮动后第一个元素将在右侧。然后将类添加到输入和标题，并将属性“float:right”设置为此类。最后在每个标题后放置空的“

”，这样它就会换行。最后，如果您不想将其放在右侧，您可以将整个表格 float 到左侧。

<style>
.di-wrapper{
  float: right;
}


.di{
float: left;
}

</style>


<div class="col-lg-6">
    <form class="cf">
    <div class="di">
      <input class="di-wrapper shadowDepth1" type="text" id="input-name" placeholder="Name">
	  <header class="di-wrapper">Name</header>
      <div></div>
      <input class="di-wrapper shadowDepth1" type="email" id="input-email" placeholder="Email address">
	  <header class="di-wrapper">Email</header>
      <div></div>
      <input class="di-wrapper shadowDepth1" type="text" id="input-subject" placeholder="Subject">
	  <header class="di-wrapper">Subject</header>
      <div></div>
    </div>
  </form>
  </div>