如何让两段文本并排显示且适配屏幕宽度变化？

你提到希望让“Login”和“Cart”两段文本并排显示而非上下排列，同时保持适配屏幕尺寸的响应式效果——目前移除Icontext后Carttext的位置是符合预期的，但加上Icontext后没法做到左侧排列且保持响应式。这里给你两种简单可靠的实现方案：

方法一：使用Flexbox（推荐） #

Flexbox是当前实现响应式布局最便捷的方式，只需要给两个元素添加一个父容器并设置弹性布局，就能轻松实现并排效果，还能自动适配屏幕宽度。

修改后的代码如下：

<!-- 新增父容器包裹两个元素，实现弹性布局 -->
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
  <div id="Icontext" style="position: relative;">Login</div>
  <div id="Carttext" style="position: relative;">Cart</div>
</div>

• display: flex：将父容器设置为弹性容器，子元素默认横向排列
• flex-wrap: wrap：当屏幕宽度不足时，两个元素会自动换行，避免布局溢出
• gap: 20px：给两个元素之间添加间距，优化视觉体验

方法二：使用CSS Grid #

如果需要更精细的布局控制，CSS Grid也是不错的选择：

<div style="display: grid; grid-template-columns: auto auto; gap: 20px;">
  <div id="Icontext" style="position: relative;">Login</div>
  <div id="Carttext" style="position: relative;">Cart</div>
</div>

• grid-template-columns: auto auto：让两列自动分配可用宽度
• gap: 20px：设置列之间的间距
• 要是想在小屏幕下自动切换为单列布局，可以添加媒体查询：

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

另外，注意你原代码里的两个小细节：

• HTML标签要保持大小写一致，把大写的<DIV>改成小写的<div>（虽然浏览器兼容，但规范写法是小写）
• 行内样式里的分号不要加在属性值外面，比如id="Icontext";应该改成id="Icontext"

这样修改后，Icontext就会稳定显示在Carttext左侧，同时在小屏幕上会自动适配，不会出现布局错乱的问题。

内容的提问来源于stack exchange，提问作者Francis Duggan