html - 媒体查询中的格式化 flex

Question

我在格式化我制作的栏时遇到问题。它在桌面上运行完美，但当我尝试为移动设备格式化它时，箭头看起来的部分 >，看起来像一个颠倒的 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;
}

fiddle

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 中。