我创建了一个UI，上面有一个图标，用户名和电话号码。我用于Image的CSS属性是
float: left; position: relative; margin-left: 4%;
当我增加margin-left时，image和usrname都移到了右边。我只想把图标向右移一点。怎么会这样呢？
yuvru6vn1#
如果没有确切的标记和编写CSS的上下文，很难给予你一个具体的答案。然而，我建议遵循大多数较新的CSS框架（如Bootstrap和Font Awesome）中编写的标记和样式。它们都使用span或i元素来附加图标，因此HTML在语义上是有效的。此外，这将给予你更多的灵活性来应用你的特定图标样式。检查Font Awesome示例中的i元素应该会给予您对一些基本的图标样式有一个很好的了解，并使您能够获得所需的外观。
drkbr07n2#
由于您使用position: relative;作为图标，因此只需使用left: 4%（或其他值）而不是margin-left，这将相对于其原始位置移动相对位置的元素，而不会影响周围的任何其他元素。
position: relative;
left: 4%
margin-left
d5vmydt93#
将position:relative添加到 Package 元素，并将position:absolute添加到图标。然后，将right:4%添加到图标中，并调整值以获得所需的边距。Here是关于CSS定位的一些信息。我将引用解释此解决方案的部分：带有position: absolute;的元素相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）。但是，如果绝对定位元素没有定位祖先，它将使用文档主体，并随着页面滚动而移动。注意：绝对定位的图元将从正常流中删除，并且可以与图元重叠。
position:relative
position:absolute
right:4%
position: absolute;
3条答案
按热度按时间yuvru6vn1#
如果没有确切的标记和编写CSS的上下文，很难给予你一个具体的答案。然而，我建议遵循大多数较新的CSS框架（如Bootstrap和Font Awesome）中编写的标记和样式。它们都使用span或i元素来附加图标，因此HTML在语义上是有效的。此外，这将给予你更多的灵活性来应用你的特定图标样式。
检查Font Awesome示例中的i元素应该会给予您对一些基本的图标样式有一个很好的了解，并使您能够获得所需的外观。
drkbr07n2#
由于您使用
position: relative;作为图标，因此只需使用left: 4%（或其他值）而不是margin-left，这将相对于其原始位置移动相对位置的元素，而不会影响周围的任何其他元素。d5vmydt93#
将
position:relative添加到 Package 元素，并将position:absolute添加到图标。然后，将right:4%添加到图标中，并调整值以获得所需的边距。Here是关于CSS定位的一些信息。
我将引用解释此解决方案的部分：
带有
position: absolute;的元素相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）。但是，如果绝对定位元素没有定位祖先，它将使用文档主体，并随着页面滚动而移动。
注意：绝对定位的图元将从正常流中删除，并且可以与图元重叠。