对齐两个内联块，使它们保持在同一行答案

【问题标题】：Align two inline-block so that they remain on the same line对齐两个内联块，使它们保持在同一行
【发布时间】：2016-07-21 18:55:35
【问题描述】：

我有类似http://jsfiddle.net/paolobenve/gh577vg3/6/的情况：

<div style="width: 100%;border: 3px solid #73AD21;">Container div<br>
  <span style="display: inline-block;
           position:relative;
           border:1px solid green;
           width: 1em;">
    T
  </span>
  <span style="display: inline-block;position:relative;border:1px solid green;">
     This asdfa sdf asdfa sdfa sdfa da da asd asdasdf adfa asfd
     asd s sd asd fasdf asdf asd asdf asd asd asd sdsdf sdsdf asd
     asd asd sdsdf sdsdf asd asd asd sdsdf sd sa
  </span>
</div>

两个连续的内联块，第一个具有固定宽度，第二个跨越剩余空间。

如果视口宽度变窄（或者如果第二个跨度中的文本变长），第二个跨度往往会占据所有视口宽度，并连续保持在第一个跨度之下。

我希望第二个跨度始终保持在第一个跨度的右侧，与视口宽度或文本长度无关。

有办法实现吗？

【问题讨论】：

如果将包含的 div 设置为像素量，则可以
不能，网页必须是响应式的

标签： css

【解决方案1】：

也许如果你给第二个跨度添加一个最大宽度，这样样式就会像这样：

span {
  display: inline-block;
  position:relative;
  border: 1px solid green;
  max-width: 50%;
  word-wrap: break-word;
}

最大宽度将确保第二个跨度不会超出给定的数字。使用百分比使其更具动态/响应性，但您也可以使用 px。您还可以为第一个跨度添加一个最大宽度，以便它们都有限制。

PS，自动换行确保没有单词超出范围（如果您碰巧有一个很长的单词）。

【讨论】：

【解决方案2】：

显然，将white-space: nowrap; 添加到容器div 和white-space: normal; 到第二个span，一切正常，请参阅http://jsfiddle.net/paolobenve/gh577vg3/7/

【讨论】：