Question

好的，这是我的HTML部分：

<ul id="history">
  <li class="historyYear"><span class="rotateYear">1962</span> <div class="trophy"></div><div class="trophy"></div> </li>
  <li class="historyYear"><span class="rotateYear">1960</span> <div class="trophy"></div> </li>
</ul>

并且有我的css代码：

.historyYear {
    height:70px;
    margin-bottom:10px;
    display:flex;
    justify-content:flex-start;
    flex-wrap: nowrap;
}

.rotateYear {
    -webkit-transform: rotate(-90deg);
    height: 43px;
    margin-top: 13px;
    margin-left: -2px;
    font-size: 30px;
    padding: 0px 6px;
}

.trophy {
    width:50px;
    max-width:50px;
    height:50px;
    background:grey; 
}

输出应该像左对齐;但我在中心奖杯之间得到了很大的空白。还有live demo online。

2个灰色框应位于其左侧。如何将它们对齐到左侧？

Answer 1

您已margin:auto将其更改为margin: 5px;。

试试这个：

#mainContent .frames div {
  margin: 5px;
}

我刚检查过你是否添加了上面的代码，它会影响其他视图。所以试试这个新的css，它将针对#historyTab

中的那些奖杯

#historyTab #mainContent .frames div {
      margin: 5px;
    }

justify-content对flex容器没有影响

1 个答案: