左側元素的固定邊距

我必須在我的網站上顯示圖標。儘管屏幕尺寸發生變化，但我希望在它們之間有一個固定的間距。他們的立場會有所不同，但我希望這種分離保持不變。左側元素的固定邊距

<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

左側元素的固定邊距

回答

相關問題