左侧元素的固定边距

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

<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%; 
}

玩它，我已经能够移动图标，以便它们不重叠，但这不是我所需要的。我希望他们改变立场，但保持他们之间的分离。

来源

2015-08-03 Aldridge1991

问题寻求帮助调试（“为什么不是这个代码的工作？”）必须包括所期望的行为，一个特定的问题或错误的和必要的重现最短码它**在问题本身**。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

1.编辑您的问题，具体为 2.添加'jsfiddle' – vivekkupadhyay

使用分隔线！

创建一个这样的：

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

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

来源

2015-08-03 11:36:57

你的意思是这样的。

Fiddle

i{ 

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

}

来源

2015-08-03 11:48:11 Steevan

左侧元素的固定边距

回答

相关问题