Question

可以在不使用表格的情况下将标签放在每个文本框的上方？我的问题是当我尝试在“NoWrap”中放置一个“新行”时。

基本上我得到了一个数组数组，它有“name”和“Value”，这个值会被用户改变，所以第一组元素将并排显示，下一组元素将显示在下面，并排，继续。我可以使用这个简单的代码，但标签位于组件的 LEFT 。

<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

如果您将文本放在正确的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 2

你可以使用position：relative + margins

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

Answer 3

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

<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 */

＆＃13;

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

＆＃13;

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

＆＃13;

新行“NoWrap”

3 个答案: