时间戳

首页 > 解决方案 > 为什么 flex-direction:row 不并排放置项目？

css - 为什么 flex-direction:row 不并排放置项目？

问题描述

我试图让这两个 div 项目与 display: Flex, flex-direction: Row 并排放置。但是，它似乎不起作用。

CSS：

.projectBack {
    padding-top: 2em;
    padding-bottom: 2em;
    margin: auto;
    max-width: 680px;
    display: flex;
    flex-direction: row;
}

.projectBackText {
    color: #AFAFAF;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    -webkit-transition: 500ms;
}

.projectBackText:hover{
    transform: translateX(15px);
    transition: 500ms;
}

.projectBackArrow {
    background-color: pink;
    background-image: url("img/backArrowLight.png");
    background-size: 8px;
    background-position: center;
    background-repeat: no-repeat;
    height: 16px;
}

HTML：

<div class="projectBack">
    <a href="index.html">
        <div class="projectBackArrow"></div>
        <div class="projectBackText">Projects</div>
    </a>
</div>

标签： cssflexbox

解决方案

flex-direction: row适用于 Element 的直接子元素，在这种情况下为<a>.

你应该交换<a>和<div class="projectBack">.

<a href="index.html">
  <div class="projectBack">
    <div class="projectBackArrow">⮌&lt;/div>
    <div class="projectBackText">Projects</div>
  </div>
</a>

推荐阅读