防止文本在输入字段下换行答案

【问题标题】：Prevent text from wrapping under the input field防止文本在输入字段下换行
【发布时间】：2016-04-20 20:33:30
【问题描述】：

我有带有 Input 的卡片和一些用 span 包裹的文本。当文本很长时，它会包裹在复选框下

Codepen：http://codepen.io/padmacnu/pen/bpKOVB

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}

<div>
    <input type="checkbox">
    <span>text is too long and wraps under the checkbox</span>
</div>

【问题讨论】：

你试过 white-space: nowrap;
你想把文本放到哪里？ div 不够大，无法容纳这么多的文字。
display:flex; 在你的 div 上会将它们放在同一行
题外话，但你真的应该使用label而不是span

标签： html css

【解决方案1】：

你可以这样做：http://codepen.io/dirtysmith/pen/QNxzGM

div {
  font: 12px arial;

  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}
input{
    width:20px;

    position:relative;
    left: 0px; 

    vertical-align:middle; 
}

span{  
    width:200px;       

    position:relative;
    left: 0px;

    display:inline-block;    
    vertical-align:middle; 
}

【讨论】：

+1 用于向后兼容的解决方案... flex 是一个很酷的 CSS，但不适用于旧版浏览器。

【解决方案2】：

您可以浮动输入并使span 成为建立块格式上下文的块。

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}
input {
  float: left;
}
span {
  display: block;
  overflow: hidden; /* Establish BFC */
}

<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>

或者，您可以使用 flexbox：

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
  display: flex;
}
span {
  flex: 1; /* Fill remaining space left by the input */
}

<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>

【讨论】：

感谢会员的快速帮助：）

【解决方案3】：

float：在输入左侧工作
Flex 也很有魅力

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}
input {
  float: left;
}

<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox</span>
</div>

http://codepen.io/padmacnu/pen/bpKOVB

【讨论】：