javascript - HTML/CSS : display circular divs in horizontal scrolling lineup? Div 出现在彼此之上？

Question

通过将外部 div 设置为显示表格并将其全部放在一个 ul 中，我已经成功地将一个包含 three.js 动画的 div 置于另一个圆形 div 的中心。我

我遇到了问题，但是使用 li 创建这些圆形 div 的水平排列(每个 div 中有另一个 div)——无论我使用什么填充，所有 div 都出现在彼此之上。我最终希望这些 div 水平滚动，但还没有开始解决这个问题。这是我的问题的屏幕截图:

CSS:

.circle1 {
    background: #50a3a2;
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
    display: table;
    border-radius: 50%;
    position: absolute;
    margin: 50px auto;
    height: 100px;
    width: 100px;
}
.circle2 {
    background: #000;
    display: table;
    border-radius: 50%;
    position: absolute;
    margin: 50px auto;
    height: 100px;
    width: 100px;
}
#btn1 {

    vertical-align: middle;
    text-align:center;
    left:0%;
    position:relative; /*makes left effective*/
    display:table-cell;
}
#btn2 {
    vertical-align: middle;
    text-align:center;
    left:0%;
    position:relative; /*makes left effective*/
    display:table-cell;
}
ul {

}
li {
    display: table;
list-style-type: none;
padding: 20px;
}

HTML:

<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
    <a href="">
        <ul>
        <li>
        <div class ="circle1">
        <div id ="btn1"></div>
        </div>
        </li>
        <li>
        <div class ="circle2">
        <div id ="btn2"></div>
        </div>
        </li>
        </ul>
    </a>
</div>
</div>
<script src="js/lowpolyPlanets.js"></script>  
<script src="js/test2.js"></script> 

这里出了什么问题？

编辑 - li 元素向左倾斜:

CSS-

.circle1 {
    background: #50a3a2;
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
    display: table;
    border-radius: 50%;
    position: relative;
    margin: 50px auto;
    height: 100px;
    width: 100px;
}
.circle2 {
    background: #000;
    display: table;
    border-radius: 50%;
    position: relative;
    margin: 50px auto;
    height: 100px;
    width: 100px;
}
#btn1 {

    vertical-align: middle;
    text-align:center;
    left:0%;
    position:relative; /*makes left effective*/
    display:table-cell;
}
#btn2 {
    vertical-align: middle;
    text-align:center;
    left:0%;
    position:relative; /*makes left effective*/
    display:table-cell;
}
.ulContainer {
    text-align: center;
}
ul {
    margin: 0;
        padding: 0;
    background-color: red;

}
li {

    float: left;
list-style-type: none;
padding: 20px;
}

HTML:

<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
    <div class = "ulContainer">
        <ul>
        <li>
        <div class ="circle1">
        <div id ="btn1"></div>
        </div>
        </li>
        <li>
        <div class ="circle2">
        <div id ="btn2"></div>
        </div>
        </li>
        </ul>
    </div>
</div>
</div>

Answer 1

你想让它看起来像下面这样吗？

如果是，则将 float:left 赋给您的 li 并尝试删除 circle1 的位置或将其更改为 relative。