左对齐的灵活内容行

时间:2018-03-31 19:35:10

标签: css flexbox

好的,我一直在寻找并且没有看到任何足够接近推断答案的问题。

我在Flex容器中显示了一个大的列表(UL / LI)颜色选项,并且需要将列对齐到左侧。目前第一行是偏移的,我没有看到如何让它像剩余的行一样显示。

我已经尝试过CSS - 填充,边距,对齐选项,对齐,从行到列的更改等等。我接受CSS可能很草率,非常感谢任何帮助。

以下是应用于网页的CSS(网址:https://winepaperscissors.com/custom-item-request/):

.colors .control-label{
  display: none;
}
.colors {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
}
.colors img {
  width: 10vmin;
  border-radius: 50%;
  margin-top: 6px;
  display: block;
}
.colors input[type="radio"]{
    visibility:hidden;
}
.colors input[type="radio"]:checked + img {
    border: #444444 5px solid;
}

整个颜色选择在.colors类中,并且是内联无序列表。

1 个答案:

答案 0 :(得分:1)

它是因为除了第一个标签之外,所有标签都有<p>Click the Step button and it will move the image over to the next cell all the way along the PERIMETER of the cell. The reset button then will reset the table back to normal. With no images</p> <table id="myTable"> <tr> <td> <p>Row1 cell1</p> </td> <td> <p>Row1 cell2</p> </td> <td> <p>Row1 cell3</p> </td> <td> <p>Row1 cell4</p> </td> </tr> <tr> <td> <p>Row2 cell1</p> </td> <td> <p>Row2 cell2</p> </td> <td> <p>Row2 cell3</p> </td> <td> <p>Row2 cell4</p> </td> </tr> <tr> <td> <p>Row3 cell1</p> </td> <td> <p>Row3 cell2</p> </td> <td> <p>Row3 cell3</p> </td> <td> <p>Row3 cell4</p> </td> </tr> <tr> <td> <p>Row4 cell1</p> </td> <td> <p>Row4 cell2</p> </td> <td> <p>Row4 cell3</p> </td> <td> <p>Row4 cell4</p> </td> </tr> </table> <br> <!-- calls the function that moves the image --> <button onclick="moveImageAlongCells()">STEP</button> <!-- resets the table to it's original form. (without any images) --> <button onclick="reset()">RESET</button>

此部分margin-left:10px表示.caldera-grid .radio-inline + .radio-inline 已应用于margin-left:10px

之后的实验室.radio-inline

替换此

.radio-inline

.caldera-grid .checkbox-inline + .checkbox-inline, .caldera-grid .radio-inline + .radio-inline

.caldera-grid .checkbox-inline + .checkbox-inline, .caldera-grid .radio-inline + .radio-inline, .radio-inline:first-of-type添加到第一个margin-left:10px

或简单地将其替换为:

.radio-inline

删除.caldera-grid .checkbox-inline + .checkbox-inline, .caldera-grid .radio-inline