html - 左侧元素的固定边距

Question

我必须在我的网站上添加图标。尽管屏幕尺寸发生变化，但我希望它们之间有一个固定的分隔。他们的立场会有所不同，但我希望这种分离保持不变。

<i class="material-icons" id="menu-toggle">menu</i>
<i class="material-icons" id="menu-text">face</i>

#menu-toggle{
    margin-left: 5%;
    margin-top: 5%;
}

#menu-text{

    margin-left:90px;
   margin-top: 5%;
}

使用它，我已经能够移动图标，使它们不重叠，但这不是我需要的。我希望他们改变位置，但保持他们之间的距离。

Answer 1

使用分隔线!

像这样创建一个:

.divider{
    width:50px;
    height:auto;
    display:inline-block;
}

然后将它插入元素之间，使它们之间保持分隔线宽度的恒定间距。您还可以建立可用屏幕空间的固定百分比，以此作为保持它们相对于显示器的一种方式。

<div style="text-align: center"> 
    <asp:Icon ID="Icon1" "Width="90px"/>
    <div class="divider"/>
    <asp:Icon ID="Icon2" "Width="90px"/>
</div>

只需使用百分比让它们与屏幕边缘保持安全距离即可。