Question

我无法在单个div中绘制四个圆圈，因为我想使用圆圈创建菜单。请帮我纠正代码。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="menu">
        <ul>
            <li class="circle">
            </li>
            <li class="circle">


            </li>
            <li class="circle">


            </li>
            <li class="circle">


            </li>
        </ul>
    </div>
</body>

</html>

的style.css

.menu ul {

     list-style-type: none;
}
.menu li {
    display: inline;

}
.circle {
    border-radius: 140px;
    width: 140px;
    height: 140px;
    background: #00b4ff;
   margin-left: 75px;


}

Answer 1

将您的菜单li显示属性更改为inline-flex。

.menu ul {
     list-style-type: none;

}
.menu li {
    display : inline-flex;
}
.circle {
    border-radius: 20px;
    width: 20px;
    height: 20px;
    background: #00b4ff;
    margin-left: 15px;


}

内联块也可以使用

Answer 2

.menu li {
    display: inline;
}

将此更改为..

.menu li {  
    display: inline-block;
}

内联块将创建一个块格式

或者您可以使用

.menu li {  
    float:left;
}

如果您正在开发桌面版网站，请注意显示：inline-flex在IE 10下面支持不足

Answer 3

如果您为菜单项添加标签，如下所示：

<div class="menu">
    <ul>
        <li class="circle">One</li>
        <li class="circle">Two</li>
        <li class="circle">Three</li>
        <li class="circle">Four</li>
    </ul>
</div>

然后使用以下CSS：

.menu ul {
    list-style-type: none;
}
.menu li {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.circle {
    border-radius: 140px;
    width: 140px;
    height: 140px;
    line-height: 140px;
    background: #00b4ff;
    margin-left: 75px;
}

使用display: inline-block（如前面的答案中所述），您还需要指定line-height与height相同，然后应用vertical-align和text-align将文本居中。

请参阅小提琴：http://jsfiddle.net/audetwebdesign/UZbTV/

结果如下：

enter image description here

如何在单个div元素中绘制四个圆圈？

3 个答案: