Question

除了如何将它们并排放置之外，我已经找到了关于这些圈子的大部分内容。就像一个圆圈在另一个圆圈之上。颜色，字体，文字位置等等我已经想出或有所帮助。但是现在，并排而不是顶部/底部的圆圈使我望而却步。我的最终目标是并排4-5个圈子。

＆＃13;

.ca-menu{
    padding: 0;
    margin: 20px auto;
    width: 500px;
}

.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #f6f6f6;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-right: 4px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    border-radius: 125px;
    transition: all 400ms linear;
}

.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;
}

＆＃13;

<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>
</ul>

<ul class="ca-menu">
    <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>

＆＃13;

Answer 1

有几点需要注意：

所有圈子项目都应位于一个唯一ul。
display: inline-block;是元素并存的原因。

由于您为ul设置了500px的宽度并且其中的圆圈太大，所以它不适用于您的情况，因此它们必须转到下一行。

我删除了此宽度，并为每个display: inline-block;项添加了li。

HTML：

<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>

CSS：

.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;
}

here is a codepen of how it looks。

Answer 2

您需要做的就是在.ca菜单中添加display: inline

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

将css3菜单圈并排放置

2 个答案: