Question

我正在尝试在圈子旁边添加文字。

HTML

<div class="row">
   <div class="col-sm-2">
      <span><div class="circle"></div></span><p>available</p>

   </div>

 </div>

CSS

.circle {
width:10px;
height:10px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
background: green;

}

现在，圆圈位于<p>标记的顶部。我想添加两个圈子：available和一个说not available的红色圈子。另外，如果您知道更好的方法，请告诉我。

谢谢，

Answer 1

默认情况下div占据宽度的100％，这就是您的p标记换行到下一行的原因。你可以设置，例如div上的display:inline-block可以改变这种行为。

请参阅this fiddle了解您的两个圈子。

Answer 2

您可以使用图标代替。我喜欢字体真棒图标集http://fortawesome.github.io/Font-Awesome/icon/circle/：

您只需添加fontawesome Css文件并在您的html add：

中添加

<i class="fa fa-circle">available</i>

Answer 3

只需添加以下代码：

.col-sm-2 > span, .col-sm-2 > p {
  display: inline-block;
}

这样做会导致两个元素span和段落<p>标记成为内嵌块，因此会在同一行上对齐。

见下文：

.circle {
    width:10px;
    height:10px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    background: green;
}

.col-sm-2 > span, .col-sm-2 > p {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-sm-2"> <span><div class="circle"></div></span>
        <p>available</p>
    </div>
</div>

如何在形状旁边添加文字？

3 个答案: