如何制作一个具有独立文本字段的响应滚动框

Question

我正在尝试为我的网页制作一个带有两个单独文本字段的滚动框。我实现了一个解决方案，并在本地机器上进行了测试。后来我从另一台电脑上看了看，网页看起来并不像预期的那样——它把右边的文本字段放在左边的下面。

我应该怎么做，这样我的网页才能在每台电脑上正常工作和看起来像预期的那样？你能给我指正确的方向吗。

到目前为止我的HTML：

<style="text/css">
  .scroll {
     padding: 10px;
     height: 280px;
     width:  566px;
     overflow: auto;
</style>
<div class="scroll">
 <p style="margin: 10; float: left;">
   etc <br />
   etc <br />
   etc <br />
 </p>
 <p style="margin-left: 25px; float: left;">
   etc <br />
   etc <br />
   etc <br />
 </p>

Answer 1

您是否使用了浮点，这样它们就不会一个堆叠在另一个之上？当然，如果你的文本字段太宽，那么你需要缩小大小，这样它们就有并排显示的空间。正如您所看到的，它在这个例子中是有效的。添加了滚动此处的新示例

HTML

  <div id="righttext">
  <input type="text">
  </div>
  </div>
  <div style="float:none;"></div>

CSS

#lefttext, #righttext {
float: left;
}
   #container {
   height: 100px; 
   overflow:scroll;
  }