引导程序的样式导航栏

Question

我在设计引导导航栏时遇到问题。 所以在我的导航栏中，我有：

但我只想在一行中这样：

Essai Actuel：KJVFged

我的导航栏代码是：

<nav class="nav navbar-default">
        <div class="container-fluid">
            <div class="navbar-header ">

                     <a href="#" class="navbar-brand ">AMG</a> 

            </div>

            <div>
                <ul class="nav navbar-nav navbar-right ">
                    <li><p class="navbar-text"><div class="essaiActuel"></div></p></li>
                    <li><a><div class="session"></div></a></li>
                </ul>
            </div>
        </div>
    </nav>

我通过这种方式给出了一个内容：

$('.essaiActuel').text('Essai actuel : ');

有人可以告诉我如何增加导航栏中元素的宽度吗？

Answer 1

<span class="essaiActuel"></span>应该这样做

Span将使所有内容保持内联。

<li><p class="navbar-text"><span class="essaiActuel"></span></p></li>

Answer 2

<span class="essaiActuel"></span>

CodePen示例

看起来像将div更改为跨作品。