Question

我尝试在textbox内联后添加一些文字。我希望它是＆＃34;附加＆＃34;到textbox，但我也希望它忽略任何其他试图强制它到新行的div。原因是我的文本框有点接近我的包装器div的边框，我希望文本不受此包装器div的影响，同时仍然具有相对于{{textbox的定位1}}。

有可行的方法吗？我尝试过使用绝对定位，但这使得我的页面保持响应变得困难。

修改

根据要求，这是我能想到的最简单的例子：

http://jsfiddle.net/zzaq5h4q/3/

＆＃13;

#wrapper {
  width: 40%;
  height: 400px;
  background-color: #cccccc;
}

＆＃13;

<div id="wrapper">
  <input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>

＆＃13;

Answer 1

您可以使用white-space: nowrap;来阻止文本换行，因为当文本空间不足时，它会阻止文本在最近的空格处断开。

<强> NOWRAP

与正常情况一样折叠空格，但会抑制文本中的换行符（文本换行）。

（https://developer.mozilla.org/en-US/docs/Web/CSS/white-space）

默认overflow在visible上设置为#wrapper，这意味着内容可能会溢出并仍然显示。

<强>可见

默认值。内容未被剪裁，可能会在内容框外呈现。

（https://developer.mozilla.org/en-US/docs/Web/CSS/overflow）

#wrapper {
  background-color: #cccccc;
  white-space: nowrap;
  width: 40%;
}

<div id="wrapper">
  <input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>

Answer 2

您无法浏览wrapper，但可以将文字换成paragraph tags。

这是example

p {
  width: 40%;
  display: inline-block;
  margin-top: -1px;
}
#wrapper {
  width: 40%;
  height: 400px;
  background-color: #cccccc;
}
input {
  vertical-align: top;
  display: inline;
}

<div id="wrapper">
  <input type="text" name="textbox" />
  <p>I want this text to stay inline, even past the wrapper!</p>
</div>

将文本粘贴到元素同时忽略其他div间距的最佳方法？

2 个答案: