Html 并排放置css3菜单圈

关于这些圆圈，除了如何将它们并排放置外，我已经弄明白了大部分事情。按原样，一个圆圈位于另一个圆圈之上。诸如颜色、字体、文本位置等我已经了解或得到帮助的东西。但现在，这些圆圈并排排列，而不是顶部/底部，让我难以理解。我的最终目标是有4-5个圆圈并排

.ca菜单{
填充：0；
保证金：20px自动；
宽度：500px；
}
李先生{
宽度：230px；
高度：230像素；
边框：10px实心#F6F6；
溢出：隐藏；
位置：相对位置；
浮动：左；
背景：#fff；
保证金权利：4px；
盒影：1px 1px 2px rgba（0,0,0.2）；
边界半径：125px；
过渡：所有400ms线性；
}
.ca菜单li：悬停{
背景：#f7f7f7；
边框颜色：#fff；
变换：旋转（360度）；
}
.ca菜单li：悬停.ca图标{
颜色：#555；
字体大小：60px；
}
.ca菜单li:hover.ca main{
显示：无；
}
.ca菜单li:hover.ca子菜单{
不透明度：0.8；
}

您只需添加到.ca菜单a

显示：inline

.ca-menu{
    display: inline;
    padding: 0;
    margin: 20px auto;
    width: 500px;
}

---

有几件事需要注意：

所有圆圈项目应位于一个唯一的

ul

内

显示：内联块是元素并排存在的原因

在您的案例中，它不起作用，因为您为

ul

设置了500px的宽度，并且其中的圆圈太大，因此它们必须转到下一行

我删除了这个宽度并添加了

display:inline块到每个
li
项目

HTML:

和
 
显示：内联块到ca菜单？这是可行的，但它在两个圆圈之间造成了巨大的差距。下一步我将研究如何消除这种差距。非常感谢！它是同一元素的宽度，减小它，或者干脆删除它
<ul class="ca-menu">
    <li>
        <a href="#">
            <span class="ca-icon"></span>
            <div class="ca-content">
                <h2 class="ca-main">testing</h2>
                <h3 class="ca-sub">testing2</h3>
            </div>
        </a>
    </li>
        <li>
        <a href="#">
            <span class="ca-icon"></span>
            <div class="ca-content">
                 <h2 class="ca-main">testing3</h2>
                <h3 class="ca-sub">testing4</h3>
            </div>
        </a>
    </li>
</ul>

.ca-menu{
    padding: 0;
    margin: 20px auto;
}

.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #f6f6f6;
    overflow: hidden;
    position: relative;
    background: #fff;
    margin-right: 4px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    border-radius: 125px;
    transition: all 400ms linear;
    display: inline-block;
}

.ca-menu li:hover{
    background: #f7f7f7;
    border-color: #fff;
    transform: rotate(360deg);
}
.ca-menu li:hover .ca-icon{
    color: #555;
    font-size: 60px;
}
.ca-menu li:hover .ca-main{
    display: none;
}
.ca-menu li:hover .ca-sub{
    opacity: 0.8;
}