问如何自动为消息栏留出页边距
EN

Stack Overflow用户

提问于 2014-05-12 20:03:17

回答 1查看 36关注 0票数 0

我正试图发出一个信息，以取代悬停。我的代码：

CSS:

.showtext:hover:before {
content: attr(data-content);
padding: 0.8em 1em;
position: absolute;
color: #fff;
background: #47a3da;
margin-left: 5%;
}

<span class="showtext" data-content="Message">Hover Me</span>

我已经将margin-left设置为5%，但它并不总是有效。当跨度内的文本较长时，它会重叠，所以我如何将其设置为自动margin-left，10px说。

我试图设置为auto，但它没有工作。另外，我如何在消息的左边添加一个三角形，使其指向span文本。

回答已采纳

发布于 2014-05-12 20:08:32

在这里，margin-left被应用到.showtext元素的左侧边缘。你想要做的是在右边5%的位置显示这个框。

只需将:before选择器更改为:after以解决问题，就可以在元素之后而不是在元素之前应用悬停框。

至于你的第二个问题，我建议搜索一下，因为答案不止一次(我知道，我见过这些问题)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23617826

复制

相似问题

问如何自动为消息栏留出页边距EN