Align div neben <a href> tag

Question

Ich habe versucht, diese einfache Sache auf die richtige Weise ausgerichtet, aber immer noch auf der Suche nach einem Ausweg. Meine einfache Frage ist, wie man den Kreis <div class="circle active"></div> ausrichtet, um neben dem Namen zu sein. gerade jetzt erscheint es an der Spitze.

<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

Das Problem ist, weil die <div> ein Element block Ebene ist.

Sie können entweder:

1. verwenden, um ein <span> Element anstelle der <div>
2. geben Sie Ihre <div> ein display: inline-block Eigenschaft

Answer 2

gelten display: inline-block oder float: left zum Kreisklasse mit CSS. Sollte gut funktionieren.

Answer 3

Ich bin mir nicht sicher, ob dies die Antwort ist, die Sie suchen, aber ich schlage zwei verschiedene Lösungen vor.

1. können Sie die div setzen und die a (link) in einer ul (ungeordnete Liste) und float: left das CSS-Attribut anwenden. Sie können es dann wie gewünscht formatieren (indem Sie die Kugeln oder etwas anderes entfernen).

2. Machen Sie das Positionsattribut der Tags absolute und richten Sie sie so aus, wie Sie möchten. Dies ist nicht stabil, wenn Sie die Größe des Fensters ändern, aber Sie können es versuchen.