html - Is there a way to make a html list behave like this

Question

I'm creating a drag and drop seat plan. I have been doing all sorts of way to manipulate the list to look like this:

it currently look like this:

How can I reverse it? i want the teacher to feel that he's just facing the class. is this possible? Thank you in advance!

styles.css

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

}
ul {
    list-style-type:none;
    width:500px;
}
#contentLeft li {
    list-style: none;
    width: 78px;
    height: 78px;
    background-color:#2a70db;
    border: #CCCCCC solid 1px;
    color:#fff;
    float:right;
    margin: 3px 2px 0 0;
    padding: 5px 5px 5px 5px;
}

Answer 1

您可以使用 css 选择器。在你的情况下，第三个元素应该在一个新的行上，这样你就可以和他一起清除浮动。

代码将是这样的：

li:nth-child(3) {
    clear: both;
}