html - 文本使图像下降，从而弄乱了 UI

Question

我写了一个这样的用户界面:

这是代码:
HTMLcode:

<div class = "category2 ctg">
    <span class = "ctgryName2">Junos OS Fundamentals</span>
    <span class = "ctgryIcon2 pull-right"></span>
    <span class = "Icon2 pull-right"></span>
</div>  

CSS代码:

.category2{
        width: 49%;
        line-height : 35px;
        border-bottom: 1px solid grey;  
    }
.ctg{
        float: left;
    }
.ctgryName2{
        color: grey;
        font-size: 15px;
        font-weight: 500;
        font-family: "robotRegular";
        overflow: auto;
    }
.ctgryIcon2{
        background-image: url("../JunosImages/mob/challenger-inactive_icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;           
        height: 28px;
        margin-top: 0.7%;
        width: 30px;
    }
    .Icon2{
        background-image: url("../JunosImages/mob/practice-inactive_icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;           
        height: 28px;
        margin-top: 0.7%;
        width: 30px;
    }  

如果我像这样添加额外的文本:

<div class = "category2 ctg">
    <span class = "ctgryName2">Junos OS Fundamentals abracardabra blah blah lorem lpsum</span>
    <span class = "ctgryIcon2 pull-right"></span>
    <span class = "Icon2 pull-right"></span>
</div>

然后UI变成这样:

我希望以整个文本和图像位于同一行的方式调整文本。我该怎么做？

Answer 1

我认为这应该可行:

<span class = "ctgryName2" style="white-space:nowrap;">Junos OS Fundamentals abracardabra blah blah lorem lpsum</span>

有关 white-space 的更多信息，请查看 link出。