将div对齐到<a href=""> tag

Question

I have tried to get this simple thing aligned the proper way but still looking for a way out. My simple question is how to align the circle <div class="circle active"></div>, to be beside the name. right now, it is appearing at the top.

<h4 class="media-heading">
  {{#if equals 'status.active' 'true' }}
   <div class="circle active"></div> 
  {{else}}
   <div class="circle not-active"></div>
 {{/if}}<a href="/student/{{slug}}" target="_parent">{{firstname}} {{lastname}}  <small class="pull-right">{{ createAt}}<label><input type="checkbox" name="eachstudents" value="{{_id}}">Add to Module</label></small></a></h4>

Answer 1

问题是因为<div>是block级元素。

你可以：

1. 使用<span>元素代替<div>
2. 将<div> display: inline-block属性

Answer 2

使用css将display: inline-block或float: left应用于圈子类。应该工作得很好。

Answer 3

我不确定这是否是您正在寻找的答案，但我建议采用两种不同的解决方案。

1. 您可以将div和a（链接）放在ul（无序列表）中，然后应用CSS属性float: left。然后，您可以根据需要设置样式（通过删除项目符号或其他内容）。

2. 制作代码absolute的位置属性，然后根据需要对齐它们。更改窗口大小时这不稳定，但您可以尝试一下。