带有"NoWrap“的新行

Question

可以在不使用表的情况下将每个文本框的标签放在上面？我的问题是，当我试图在"NoWrap“中插入”新行“时。

基本上，我得到了一个数组，其中有"name“和" value "，值将由用户更改，所以第一组元素将并排显示，下一组元素将显示在下面，并排，然后继续。我可以使用这个简单的代码，但是标签位于组件的左处。

<style>
    .NoWrap{white-space:nowrap;margin-top:5px;margin-left:5px;}
</style>

<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
  <div class="NoWrap">
    Label A1 <input type="text" />
    Label A2 <input type="text" />
    Label A3 <input type="text" />
    Label A4 <input type="text" />
  </div>
  <div class="NoWrap">
    Label B1 <input type="text" />
  </div>
  <div class="NoWrap">
    Label C1 <input type="text" />
    Label C1 <input type="text" />
  </div>
  <div class="NoWrap">
    Label D1 <input type="text" />
  </div>
</div>

但当我试图打破一条线的时候，每件事都搞砸了。我试着用浮子在里面放一个div，但没找到结果。寻找例子，我找到了一些，但我不能把它们放在一起

<div id='div1' style='width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
  <label>Test&nbsp;<br />
    <input type='text' style='width:100%;' id='inputBox'/>
  </label>
  <label>Test&nbsp;<br />
    <input type='text' style='width:100%;' id='inputBox'/>
  </label>
</div>

这就是我要找的

Label A1    Label A2    Label A3
TextBox...  Textbox...  Textbox...  .... goes to scroll forever

Label B1    Label B2
TextBox...  Textbox...

Label C1 
TextBox...

Answer 1

使用标签将您的输入和它们的文本关联起来总是一个好主意：

<label>Label A1 <input type="text" /></label>

然后您可以使用这些样式：

label { display: inline-block; } /* One next to the others */
input { display: block; } /* Line break between text and input */

​

.wrapper {
  border: 1px solid black;
  width: 500px;
  height: 800px;
  overflow: auto;
}
.wrapper > div {
  white-space: nowrap;
  margin-top: 5px;
  margin-left: 5px;
}
label {
  display: inline-block;
}
input {
  display: block;
}

<div class="wrapper">
  <div>
    <label>Label A1 <input type="text" /></label>
    <label>Label A2 <input type="text" /></label>
    <label>Label A3 <input type="text" /></label>
    <label>Label A4 <input type="text" /></label>
  </div>
  <div>
    <label>Label B1 <input type="text" /></label>
  </div>
  <div>
    <label>Label C1 <input type="text" /></label>
    <label>Label C2 <input type="text" /></label>
  </div>
  <div>
    <label>Label D1 <input type="text" /></label>
  </div>
</div>

​

Answer 2

如果将文本放入适当的html label元素中，则可以将它们从文档的正常流中移除，并将它们略高于通常出现的位置。

例如，让容器position: relative和label元素position: absolute。然后给容器一个margin-top: XXpx，给标签元素一个top: -XXpx

你可以看到这个在这里起作用，(jsbin link)

<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
  <div class="NoWrap">
    <label for="A1">Label A1</label>
    <input id="A1" type="text" />

    <label for="A2">Label A2</label>
    <input id="A2" type="text" />

    <label for="A3">Label A3</label>
    <input id="A3" type="text" />

    <label for="A4">Label A\4</label>
    <input id="A4" type="text" />
  </div>
</div>

和风格：

.NoWrap{
   white-space:nowrap;
   margin-top:25px;
   margin-left:5px;
   position: relative;
 }

label {
  position: absolute;
  top: -20px;
}

Answer 3

您可以使用位置:相对+边距

​

.NoWrap{white-space:nowrap;margin-top:5px;margin-left:5px;}
input {
  margin-bottom:3em;/* make room under */
  width:5em;/* resize to yyour needs */
  margin-right:-3em;/* reduce virtually rooms it uses , tune to your needs */
  position:relative;/* now time to move it at screen */
  top:1.8em;/* enough lower than baseline */
  right:5em;/* its own size */
}

<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
  <div class="NoWrap">
    Label A1 <input type="text" />
    Label A2 <input type="text" />
    Label A3 <input type="text" />
    Label A4 <input type="text" />
  </div>
  <div class="NoWrap">
    Label B1 <input type="text" />
  </div>
  <div class="NoWrap">
    Label C1 <input type="text" />
    Label C1 <input type="text" />
  </div>
  <div class="NoWrap">
    Label D1 <input type="text" />
  </div>
</div>

​