文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML/CSS:伪元素溢出之后

问HTML/CSS:伪元素溢出之后
EN

Stack Overflow用户

提问于 2013-12-09 19:53:43

回答 3查看 7.3K关注 0票数 1

我设计了一些看起来像按钮的链接。这些“按钮”包括使用:after元素添加图标字体的图标。

由于它是一个响应性的布局，按钮需要在多个屏幕大小上工作。当放置在一个灵活的容器中时，:after元素会溢出它的父元素。

示例：基本上如下所示：

<div class="wrap">
  <a href="/" class="btn icon">Test</a>
</div>

使用以下CSS代码：

.wrap {
    background: grey;
    width: 20%;
    padding: 20px;
}

.btn {
    display: inline-block;
    padding: 15px;
    background: linear-gradient(to top, #ccc, #fafafa);
    border: 1px solid #999;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.55);
    max-width: 100%;
}

.icon {
    font-family: FontAwesome;
}

.icon:after {
    content: "\f04e";
    margin-left: 8px;
}

看看这个Fiddle：http://jsfiddle.net/r6uLJ/

当您缩小窗口大小时，您将看到两个三角形(蓝色)溢出按钮(灰色-白色梯度)。我能做些什么来避免这种情况，但仍然可以使用伪元素吗？

html

css

pseudo-element

icon-fonts

回答 3

Stack Overflow用户

发布于 2013-12-09 20:04:55

如果从max-width: 100%规则集中删除.btn规则，则不会出现问题。

请参阅：http://jsfiddle.net/audetwebdesign/r6uLJ/3/

票数 2

Stack Overflow用户

发布于 2013-12-09 19:57:17

.btn {
    overflow: hidden;
}

应该能起作用。

票数 0

Stack Overflow用户

发布于 2013-12-09 20:00:03

试试这个：

* {
  box-sizing: border-box;
}

您的东西溢出是因为盒子模型(默认的)在宽度的顶部添加了填充。因此，拥有100%的宽度是100%的父级，如果添加15 if填充，当内容包装在2行时它会溢出30 if.

您可能需要根据浏览器的不同对其进行前缀，例如：

-box-sizing: border-box
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

票数 0

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

原文链接：

https://stackoverflow.com/questions/20479456

复制

相似问题

问HTML/CSS:伪元素溢出之后
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS:伪元素溢出之后EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS:伪元素溢出之后
EN