将 div 对齐到 <a href> 标签旁边

Question

我试图让这个简单的东西以正确的方式对齐，但仍在寻找出路。我的简单问题是如何将圆 <div class="circle active"></div> 对齐到名称旁边。现在，它出现在顶部。

<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

将 display: inline-block 或 float: left 应用到圆 class 和 css。应该没问题。

Answer 3

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

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

2. 设置标签的位置属性 absolute 并根据需要对齐它们。这在改变 window 的大小时不稳定，但你可以试一试。