1

我已经将一些链接设置为看起来像按钮。这些“按钮”包括使用元素添加图标字体的图标: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/

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

4

3 回答 3

2

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

见：http: //jsfiddle.net/audetwebdesign/r6uLJ/3/

于 2013-12-09T20:04:55.957 回答
0 
.btn {
    overflow: hidden;
}

应该做的伎俩。

于 2013-12-09T19:57:17.270 回答
0

尝试这个：

* {
  box-sizing: border-box;
}

你的东西溢出是因为盒子模型（默认模型）在宽度顶部添加了填充。所以拥有 100% 的宽度是父级的 100%，如果你添加 15px 的填充它会溢出 30px 当内容换行在 2 行...

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

-box-sizing: border-box
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
于 2013-12-09T20:00:03.657 回答