Question

经过几次试验后，我设法创建了these形式的textareas，看起来非常好（或者我认为）。

<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

您可能需要将元素浮动到右侧。输入和标题的第一个切换顺序（因此输入首先），因为在向右浮动后，第一个元素将在右侧。然后将类添加到输入和标题并设置属性＆＃34; float：right＆＃34;到这堂课。最后放空＆＃34;＆lt; div＆gt;＆lt; / div＆gt;＆＃34;在每个标题之后，它将突破到新行。最后你可以将整个表格浮动到左边，如果你不想把它放在右边。

＆＃13;

if (articleItems.get(position).isRead()) {
    holder.title.setTextColor(Color.argb(100, 0, 0, 0));
    holder.description.setTextColor(Color.argb(100, 0, 0, 0));
} else {
    holder.title.setTextColor(your default color);
    holder.description.setTextColor(your default color);
}

＆＃13;

在表单输入旁边添加一个标签，其动态尺寸为

1 个答案: