使用负边距与社交分享按钮(计数器)可以吗?
我在这里创建了我的案例的 JSFiddle: http://jsfiddle.net/gGCaX/ (请采取看看,以便了解我要问的问题。)
现在,说到重点,社交共享按钮或计数器在填充、边距等方面是不规则的,因为它们来自不同的人。
正如您在 JSFIDDLE 中看到的,我设法让它们看起来很好。但问题是,对于其中一个按钮(“共享”按钮 - 行中的最后一个),我必须使用“负”边距,因为它在后面留下了很多空间(即在其左侧)。
.sharethisx {
float: left;
margin: 0 0 0 -10px !important;
padding: 2px 0 0 !important;
display: inline;
}
请参阅边距:0 0 0 -10px
!重要; ??如果只是为了能见度的话我不会打扰。但这些是计数器,它们可以增长到任意数字。那么,在这种情况下就可以了吗?请指教。
I have created a JSFiddle of my case here: http://jsfiddle.net/gGCaX/ (Please take a look, so as to get some idea of what I am about to ask.)
Now, coming to the point, Social Sharing buttons or counters are irregular when it comes to padding, margins etc as they come from different people.
As you can see in the JSFIDDLE, I've managed to get them look good together. But the problem is, for one of the buttons ("SHARE" button - - the last in the line) I had to use "negative" margin as it was leaving out lot of space behind (i.e., to its left).
.sharethisx {
float: left;
margin: 0 0 0 -10px !important;
padding: 2px 0 0 !important;
display: inline;
}
See the margin: 0 0 0 -10px
!important; ?? I wouldn't have bothered if it was just about visibility. But these are counters, and they can grow to any number. So, will it be just fine in this case? Please advise.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
在您的情况下,您会没事的,因为您已将负左边距应用于向左浮动的元素。在这种情况下(对于静态元素也是如此),它会将元素向左拉,如您所见。
当您执行以下操作时,您会开始遇到负边距的意外行为:
将它们应用到元素的底部(将较低的元素向上拉)。
将它们应用到元素的右侧(将后续元素向左拉向该元素)。
以浮动的相反方向应用它们(创建一个允许内容与元素重叠的空隙)。如果负边距大小 >= 元素宽度,则元素将完全重叠。
这是一篇文章很好地描述了负边距在不同情况下如何发挥作用。
You'll be fine in your case since you've applied a negative left margin to an element that's floated left. In this case (and for static elements as well) it will pull the element left, as you're seeing.
You start to run into unexpected behaviour with negative margins when you:
Apply them to the bottom of an element (pulls lower elements up).
Apply them to the right of an element (pulls following element to the left towards the element).
Apply them in the opposite direction of a float (creates a void that allows content to overlap the element). If the negative margin size is >= the element width, the element becomes completely overlapped.
Here's an article that gives a good description on how negative margins will work in different situations.
没问题,允许负边距
正如 w3c 规定: http://www.w3schools.com/cssref /pr_margin.asp
阅读注释“允许负保证金”
祝你好运
No problems, negative margin are allowed
As the w3c states: http://www.w3schools.com/cssref/pr_margin.asp
Read the note "negative margin are allowed"
Good luck