Question

我网站的常见问题部分出现问题。我希望glyphicons不会自己掉到新的行上。尝试在问号后使用&nbsp，但这不起作用。尝试将跨度放在标题元素之外，但这不起作用。尝试过flexbox，但似乎无法正确布局。

最初我将glyphicon作为标题本身的pseduo :: after元素，这可以防止它掉到它自己的一行上，但也阻止我使用我想保留的CSS动画。删掉最后一个字也很好，但是他们自己看起来有些不合适。

HTML：

<a href="#qu5" data-toggle="collapse" class="question-anchor collapsed">
    <h3 class="question">Can I order over the telephone?<span class="glyphicon glyphicon-chevron-up"></span></h3>
</a>
<div id="qu5" class="collapse">
    <p class="answer">For child safeguarding reasons, we are unable to take telephone orders.  Please place your <a href="">order online</a> using the barcode and passcode printed on your proof card.</p>
</div>

CSS：

.question::before {
    content: "Q.";
    font-family: 'Kalam', cursive;
    margin-right: 10px;
}

.question-anchor span.glyphicon {
    transition: 0.3s transform ease-in-out;
    margin-left: 10px;
}

.question-anchor.collapsed span.glyphicon {
    transform: rotate(180deg);
}

.answer::before {
    content: "A.";
    font-family: 'Kalam', cursive;
    margin-right: 10px;
}

防止标题内的跨度创建新行

0 个答案: