Question

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

由于其响应式布局，按钮需要在多种屏幕尺寸上工作。放置在灵活容器内时，:after元素会溢出它的父级。

示例： HTML基本上看起来像这样：

<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;
}

并看到这个小提琴：http://jsfiddle.net/r6uLJ/

缩小窗口大小时，您会看到两个三角形（蓝色）溢出按钮（灰白色渐变）。有什么我可以做的，以避免这种情况，但仍然使用伪元素吗？

Answer 1

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

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

Answer 2

.btn {
    overflow: hidden;
}

应该做的伎俩。

Answer 3

试试这个：

* {
  box-sizing: border-box;
}

你的东西溢出，因为盒子模型（默认的）在宽度的顶部添加填充。因此，100％宽度是100％的父级，如果你添加15px填充，当内容包含在2行时，它将溢出30px ...

您可能需要根据浏览器为它添加前缀，例如：

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

HTML / CSS ::在伪元素溢出后父

3 个答案: