Why is my ng-repeated div not displaying as an inline-block?
<p>I am trying to ng-repeat through an array of skills and have them display as inline-blocks, but for some reason there are line breaks between each skill.</p>

<pre><code>&lt;div class="skillsWrapper" style="display: inline-block" ng-repeat="skill in hero.equipment.skills track by $index"&gt;
        &lt;span class="profileSkill"&gt;{{skill}}&lt;span ng-if="!$last"&gt;,&lt;/span&gt;&lt;/span&gt;
    &lt;/div&gt;
</code></pre>

<p>and here is the CSS:</p>

<pre><code>.skillsWrapper
    display: inline-block; 
    text-align: center;


.profileSkill
    display: inline-block;
</code></pre>

<p>I would like the skills to display like <code>throwing, climbing, fighting</code> but they show up with line-breaks like</p>

<pre><code>throwing,
climbing,
fighting
</code></pre>

<p>How can I fix this, and why isn't it working as is?</p>