Question

我想创建一个带有CSS圈和文本旁边的html / css列表（我不想为此使用项目符号）。

.menu{ 
position: relative;
display: block;
width:1em;
height:1em;
border-radius:50px;
color:#fff;
background:#000}

但是，圆圈显示在列表元素的顶部，而不是与它们一致。我怎样才能以一切形式排列（bullet + circle + text）？

Answer 1

在CSS中使用float:left。

ul
{
    list-type:none;
}
.menu
{ 
position: relative;
display: block;
width:1em;
height:1em;
border-radius:50px;
color:#fff;
background:#000;
float:left; /* use this */

}

<div class="left-menu">
    <ul>
        <li><span><a class="menu" href="#"></a>Test retest supertest megatest</span></li>
        <li><a class="menu" href="#"></a></li>
    </ul>
</div>

和Span with padding / Margin ..

希望它有所帮助。

Answer 2

答案很多，但我仍然觉得有必要发布一个更全面，更简单的答案。首先，这是我使用的代码：

<div class="left-menu">
    <ul>
        <li><a class="menu" href="#"></a> <p>Test retest supertest megatest</p></li>
        <li><a class="menu" href="#"></a> <p>Test retest supertest megatest</p></li>
    </ul>
</div>

使用CSS：

.left-menu .menu {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: #000;
    vertical-align: middle;
}

.left-menu p {
    display: inline-block;
    vertical-align: middle;
}

注意事项，一般情况下：

使用border-radius: 50%获取圆圈，无需在宽度或高度变化时更改;
我摆脱了与这个问题无关的一切（固定菜单div，颜色等）;

然后，更具体的问题：

确保li的孩子不要换行，并通过避免display: block并为inline-block和a设置p来创建自己的行。
使用a;

p

vertical-align: middle

现在你很高兴。请参阅this fiddle或one with some "debugging" info。

Answer 3

这适用于小提琴并且可以解决问题：

.menu { 
    display: inline-block;
}

Answer 4

只需在你的css样式表中添加它，就可以了！

如果你愿意，可以在大圆圈和文字（填充）之间留出一些空间

 ul
 {
    list-style-type: none;
 }

 .menu{ 
     position: relative;
     display: inline-block;
     width:1em;
     height:1em;
     border-radius:50px;
     color:#fff;
     background:#000;
     margin-right: 10px; // Add this if you want some space between text and circle
}

Answer 5

使用:before WORKING DEMO

摘要

::之前创建一个伪元素，它是该元素的第一个子元素   元素匹配。通常用于将化妆品内容添加到元素中   使用内容属性。默认情况下，此元素是内联的。

.menu:before {
    background-color: red;
    border-radius: 50px 50px 50px 50px;
    content: "";
    height: 20px;
    margin: 0 0 0 -25px;
    position: absolute;
    width: 20px;
}

Answer 6

您可以使用媒体对象解决它，您可以在谷歌搜索它，它是什么，解决“媒体 - 对象”问题的一种方法是使用弹性框。

查看此site

.Media {
   display: flex;
   align-items: flex-start;
}

.Media-figure {
   margin-right: 1em;
}

.Media-body {
   flex: 1;
}

虽然另一个答案是正确的，但是当你想做这样的事情时，这个解决方案适用于所有事情。

Fiddle

与css的圈子列表

6 个答案: