/* 移动10像素 */ .element { margin-left: 10px; } /* 移动到父元素的50%处 */ .element { margin-left: 50%; } /* 移动到左边距离自身宽度50%的位置 */ .element { margin-left: -50%; }
需要注意的是,使用这个属性会影响元素在文档流中的位置。比如,如果设置了一个元素的左边距离为50%,那么它就会依据父元素的宽度水平居中。
如果需要把多个元素往左边移动,可以使用float
属性。它可以让元素浮动,从而让其在左边或者右边悬浮。比如:
/* 把两个元素向左浮动 */ .float-left { float: left; } /* 把两个元素向右浮动 */ .float-right { float: right; }
使用float
属性需要注意,浮动的元素会脱离文档流,因此需要特别小心,确保其他元素能够正确地布局。如果其父元素高度没有被明确地设置,可能会导致高度塌陷的问题。