Question

我在窗口上有以下html，当窗口变得太小时，它会在新行上分割输入和图标。我希望他们永远在一起。有什么想法吗？

<div>
      <input type="text" class="email-address" 
            value="long-long-long-user@test-test-test.com"> 
             <i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>

这是一个css

 .email-address {
     width: 300px;
  }

有没有办法确保他们不分手？

div是身体内部的简单位置，当你使窗口宽度变小（小于300px）时，图标会跳到下面的线条。

Answer 1

只需使用width / max-width，您就可以这样做

Fiddle demo

.email-address {
  width: calc(100% - 40px);    /*  40px, the icon width + padding  */
  max-width: 300px;
}
.email-address + i {
  padding-left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <input type="text" class="email-address" value="long-long-long-user@test-test-test.com">
  <i class="fa fa-clipboard fa-1x" aria-hidden="true"></i>
</div>

另一个选项是display: flex。

Fiddle demo

Stack snippet

div {
  display: flex;
}
.email-address {
  width: 300px;
  min-width: 0;
}
.email-address + i {
  padding-left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <input type="text" class="email-address" value="long-long-long-user@test-test-test.com">
  <i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>

Answer 2

将您的元素包裹在<span class="input-icon">

中

<div>
    <span class="input-icon">
      <input type="text" class="email-address" value="bla"> 
      <i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
    </span>
</div>

而不是这个CSS：

.input-icon{
    white-space: nowrap;
}

Answer 3

尝试将类添加到父容器中：

<div class='parent'>
  <input type="text" class="email-address" value="long-value"> 
  <i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>

然后添加以下CSS：

.parent{
    whitespace: nowrap;
}

当屏幕变得太小时，阻止div分割其内容？

3 个答案: