让两个span标签并排展示

<think>好的，我现在要解决用户的问题，如何用CSS让两个span标签并排显示。用户提到了参考引用中的display: inline-block和white-space: nowrap。首先，我需要回忆一下CSS中的display属性。 span默认是内联元素（inline），所以它们通常会在一行排列。但是如果内容太长或者父容器宽度不够，可能会换行。用户可能遇到的情况是span被换行了，或者希望它们保持在同一行，不受父容器宽度的影响。 根据引用[1]，使用display: inline-block可以让元素保持内联的同时，可以设置宽高，而inline的话宽高会被忽略。所以正确的做法是给span添加display: inline-block，这样它们既可以并排，又可以调整尺寸。 另外，引用[2]提到使用white-space: nowrap来强制不换行。这可能适用于父容器，比如一个div包裹这两个span，设置nowrap可以防止内部元素换行。不过如果父容器宽度不够，元素可能会溢出。这时候可能需要结合overflow属性来处理。 接下来，我需要考虑如何将这些结合起来。可能的步骤是：首先将span设为inline-block，然后确保它们的容器不允许换行。比如： 父元素设置white-space: nowrap，span设置为display: inline-block。这样即使屏幕宽度不足，span也会强制在同一行显示，可能需要水平滚动或者溢出隐藏。 但用户可能只是想让两个span正常并排，没有换行。所以更常见的做法是直接设置span为inline-block，或者考虑使用flex布局。不过用户提到的是span标签，可能希望保持内联元素的性质，所以inline-block比较合适。 还需要注意，span之间如果有空格或者换行符，可能会产生间隙。这时候可以通过设置父元素的font-size为0，或者在HTML中去除空格来消除间隙。 总结步骤应该是：给每个span添加display: inline-block，可能需要父元素设置nowrap来确保不换行，同时处理可能的间隙问题。</think>要让两个`<span>`标签并排显示，可以通过以下步骤实现： --- ### 1. **使用 `display: inline-block`** 将`<span>`的显示模式设置为内联块元素，使其既保留内联特性（横向排列），又能设置宽高： ```css span { display: inline-block; } ``` *示例代码：* ```html <div class="container"> <span>第一个span</span> <span>第二个span</span> </div> ``` *效果：* 两个`<span>`横向排列，但若父容器宽度不足，仍会换行[^1]。 --- ### 2. **强制禁止换行（可选）** 若需严格禁止换行，可在父容器添加 `white-space: nowrap`： ```css .container { white-space: nowrap; } ``` *效果：* 即使父容器宽度不足，`<span>`也会强制横向排列（可能溢出）[^2]。 --- ### 3. **解决内联块元素间隙** `inline-block`元素间默认有空格间隙，可通过以下方法消除： #### 方法1：删除HTML中的空格 ```html <div class="container"> <span>第一个span</span><span>第二个span</span> </div> ``` #### 方法2：设置父容器字体大小为0 ```css .container { font-size: 0; } span { font-size: 16px; /* 重置子元素字体大小 */ } ``` --- ### 完整代码示例 ```html <style> .container { white-space: nowrap; /* 可选 */ } span { display: inline-block; padding: 8px; background: #f0f0f0; } </style> <div class="container"> <span>第一个span</span> <span>第二个span</span> </div> ``` ---