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

和带填充/边距的跨度..
希望有帮助。

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

<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并为a和p设置inline-block来创建自己的行;
• 使用vertical-align: middle确保a和p垂直对齐;

现在可以开始了。请参见this fiddle或one with some "debugging" info。

只需简单地将其添加到您的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
}

这在小提琴上起作用，并将达到目的：

.menu { 
    display: inline-block;
}

使用:beforeWORKING DEMO
摘要
：：before创建一个伪元素，它是匹配元素的第一个子元素。通常用于通过使用content属性向元素添加修饰内容。此元素默认为内联。

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

你可以用一个媒体对象来解决这个问题，你可以在谷歌上搜索它，它是什么，解决“媒体对象”问题的一个方法是使用一个伸缩框。
看看这个site

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

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

.Media-body {
   flex: 1;
}

虽然另一个答案是正确的，但当你想做这样的事情时，这个解决方案对任何事情都有效。
Fiddle