Question

我想让span和input保持在div固定的同一行，以便div可以滚动（如果发生溢出）。

这是我的尝试：

以下是代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    #main {
      overflow-x: auto;
      width: 30px;
      border: 1px solid black;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div id='main'>
    <span>abc</span>
    <span>efesf</span>
    <input type='text'></input>
  </div>
</body>
</html>

Answer 1

white-space: nowrap;就是你所追求的：）

Jsbin example!

CSS

#main {
  overflow: scroll; /* for CSS3 lacking browsers */
  overflow: scroll hidden;
  width: 30px;
  border: 1px solid black;
  display: inline-block;
  white-space: nowrap;
}
#main span, #main input {
  display: inline-block;
}

HTML

<div id="main">
      <span>abc</span>
      <span>efesf</span>
      <input type="text" />
</div>

Answer 2

我想，你应该使用简单的css float＆amp;显示代码。

span { float: left; display: block; width: 33%; }
input { float: left; display: block; width: 33%;}

Answer 3

您可能需要white-space: nowrap;规则。

假设您的span和input元素为display: inline：

#main {
  white-space: nowrap;
  overflow-x: scroll;
}

如何让一个跨度和一个输入保持在同一条线上并在受约束的div中滚动？

3 个答案: