Question

我的网站上有图标。虽然屏幕尺寸发生变化，但我希望它们之间有固定的间隔。 Theire的位置会有所不同，但我希望这种分离保持不变。

<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>

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

Answer 2

你的意思是这样的。

Fiddle

i{

margin-top: 5%;
margin-left:10%;

}

固定左侧元素的边距

2 个答案: