HTML/CSS：：在伪元素溢出后父亲

我已经设计了一些链接，看起来像按钮。这些“按钮”包括使用:after元素添加图标字体的图标。HTML/CSS：：在伪元素溢出后父亲

作为响应式布局，按钮需要在多种屏幕尺寸下工作。当放置在柔性容器内时，: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/

当你缩小窗口大小，你会看到两个三角形（蓝色）溢出按钮（带灰白色渐变）。有什么我可以做，以避免这一点，但仍然使用伪元素呢？

来源

2013-12-09 Sven

你为什么要指定'最大宽度：上'.btn' 100％'？ –

@MarcAudet为了防止'.btn'溢出它的容器。 – Sven

在这种情况下，最大宽度将无济于事。在你的例子中，按钮的文本+图标/内容决定了按钮的宽度，并且可能比包装器的宽度更宽，这将导致溢出情况。您需要考虑按钮在宽度缩小时的行为方式。有几种设计方法。你能否提供一些设计指导来帮助缩小解决方案的范围？ –

.btn { 
    overflow: hidden; 
}

应该这样做。

来源

2013-12-09 19:57:17

试试这个：

* { 
    box-sizing: border-box; 
}

你的事，因为溢出盒模型，该模型（默认的）将在宽度顶部的填充。所以有100％的宽度是父母的100％，如果添加15px的填充在内容上两行包便会溢出30PX ...

你可能需要它依赖于浏览器，如前缀：

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

来源

2013-12-09 20:00:03 Stefan

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

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

来源

2013-12-09 20:04:55

HTML/CSS：：在伪元素溢出后父亲

回答

相关问题