html - 如何让两条文本并排放置并响应屏幕宽度的变化？

Question

Website image我试图让这两段文字并排放置，而不是彼此重叠。我还希望它们能够响应屏幕尺寸调整。

当“Icontext”被移除时，“Carttext”位于屏幕上我想要的位置并且响应屏幕尺寸调整。

我希望“Icontext”位于它的左侧，但我似乎无法实现这一点，因为它仍然响应屏幕尺寸的变化。任何提示将不胜感激，代码如下。

<div id="Icontext";
style="position: relative;">Login</DIV>
                 
<div id="Carttext";
style="position: relative;">Cart</DIV>

Answer 1

您可以对两个元素简单地使用 display:inline-block 来实现这一点，或者您可以使用 display: flex。对于元素之间的间距，您可以使用 margin 或 padding

.flex-container {
 display: flex;
 margin: 20px; /* spacing to screen*/
 justify-content: flex-end;
}

.flex-container div:first-child {
  margin-right: 20px; /* for spaceing between element */
}

<div class="flex-container">
<div id="Icontext">Login</div>
<div id="Carttext">Cart</div>
</div>