如何强制两个内联元素包装在一起

Question

我有以下问题：这是html：

<div>
    <a href="x">Link text can also be long</a>
    <button class="xx"></button>
</div>

我希望div（a和button）中的两个元素始终位于彼此旁边。

此刻，当我更改窗口大小并且两个元素都没有足够的空间时，按钮被包裹，a位于1.行，按钮位于2。 我想要的是，文本的一部分（标签a）也可以使用按钮进行预先包装，因此按钮在2.行中永远不会是单独的。

我该怎么做？我一直在玩白色空间：nowrap ..但还没有成功。

编辑：在div上使用display flex：

我想要的是什么：

我不想要的东西：

Answer 1

希望这对你有用。

return

a span{
  display: inline-block;
}

Answer 2

您无法使用纯css进行此操作，因此必须获得javascript的帮助。

＆＃13;

＆＃13;

.spanWrap { display: inline-block; }

a { text-decoration: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <a href="x">Link text can also be long Link text can also be Link text can also be long Link text can also be</a>
  <button class="xx">Button</button>
  <script type="text/javascript">
    $(document).ready(function(){
      var copyStr = $('a[href=x]').text();
      var tempStr = copyStr.substring(0, copyStr.lastIndexOf(" "));
      var last_word_arr = copyStr.split(" ");
      var last_word = last_word_arr[last_word_arr.length - 1];
      $('a[href=x]').text(tempStr);
      $('.xx').wrap('<span class="spanWrap"><a href="x">' + last_word +' </a></span>');
    })   	
  </script>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：调整浏览器大小并查看结果。

Answer 3

如果您稍微更改结构并使用{{1} 包装最后超链接字，则可以执行纯 CSS }和button 包装 元素为display：

＆＃13;

＆＃13;

inline-block

＆＃13;

button {border-radius: 50%}

div {
  width: 350px;
  border: 1px solid;
  animation: width 3s linear infinite alternate;
}

.common {display: inline-block}

@keyframes width {
  to {width: 100px}
}

＆＃13;

＆＃13;

＆＃13;