格式化媒体查询中的弹性

Question

我在格式化我制作的栏时遇到问题。它在桌面上工作得很完美，但是当我尝试将其格式化为移动设备时，箭头看起来部分＆gt;，看起来像是颠倒的L。

在我的媒体查询中，我到目前为止已完成此操作，但无法弄清楚如何使其正常工作..

.forum_links_out {
    margin: 10px;
    background-color: #E0E0E0;
    border: 1px solid black;
    border-radius: 8px;
    display: flex;
    height: 30px;
    overflow: hidden;
    font-size: .5em;
}
.forum_links_out a {
    color: #000000;
    text-decoration: none;
    padding: 10px 30px;
    position: relative;
}
.forum_links_out a:first-child {
    padding-left: 20px;
}
.forum_links_out a span {
    width: 30px;
    height: 30px;
    position: absolute;
    right: -12px;
    top: 4px;
    transform: rotate(45deg);
    z-index: 2;
    border-right: 1px solid black;
    border-top: 1px solid black;
    background-color: #E0E0E0;

}
.forum_links_out a:last-child {
    flex-grow: 1;
}
.forum_links_out a:hover, .forum_links_out a:hover span {
    background-color: #A0A0A0;
}
.forum_links_out a:visited {
    color: #000000;
}

小提琴

https://jsfiddle.net/vd4hcy43/

Answer 1

设置媒体查询样式时，不要调整箭头大小，使其大于条形

所以只需在您的媒体中调整大小如下：

.forum_links_out {
    margin: 10px;
    background-color: #E0E0E0;
    border: 1px solid black;
    border-radius: 8px;
    display: flex;
    height: 30px;
    overflow: hidden;
    font-size: .5em;
}
.forum_links_out a {
    color: #000000;
    text-decoration: none;
    padding: 10px 30px;
    position: relative;
}
.forum_links_out a:first-child {
    padding-left: 20px;
}
.forum_links_out a:after {
    content: '';
    width: 21px;
    height: 21px;
    position: absolute;
    right: -12px;
    top: 4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
    border-right: 1px solid black;
    border-top: 1px solid black;
    background-color: #E0E0E0;

}
.forum_links_out a:last-child {
    flex-grow: 1;
}
.forum_links_out a:hover, .forum_links_out a:hover:after {
    background-color: #A0A0A0;
}
.forum_links_out a:visited {
    color: #000000;
}

<div class="forum_links_out">	
    <a href='discussions.php'>Samsung</a>
	<a>Apple</a>
	<a>HTC</a>
	<a></a>
</div>

请注意，我正在使用伪元素（:after）在html中设置箭头而不是虚拟span，这种方式更清晰，您可以避免在html中使用不必要的元素。