Question

我有这个网站http://sg.nowcommu.myhostpoint.ch/，你可以在导航中看到链接之间的空格不同。

如何在<li>元素之间设置相同的空格？

HTML：

<div class="navbar navbar-fixed-top" data-activeslide="1">
    <div class="container">


        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>


        <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav row">

                <li data-slide="4" class="col-12 col-sm-2"><a id="menu-link-4" href="#slide-4" title="Next Section"> <span class="text">Mental Coaching</span></a></li>
                <li data-slide="5" class="col-12 col-sm-2"><a id="menu-link-5" href="#slide-5" title="Next Section"> <span class="text">Personal Training</span></a></li>
                <li data-slide="6" class="col-12 col-sm-2"><a id="menu-link-6" href="#slide-6" title="Next Section"> <span class="text">Ernährungsberatung</span></a></li>
                <li data-slide="9" class="col-12 col-sm-2"><a id="menu-link-9" href="#slide-9" title="Next Section"> <span class="text">Philosophie</span></a></li>
                <li data-slide="7" class="col-12 col-sm-2"><a id="menu-link-8" href="#slide-7" title="Next Section"> <span class="text">Feedback</span></a></li>
                 <li data-slide="8" class="col-12 col-sm-2"><a id="menu-link-9" href="#slide-8" title="Next Section"> <span class="text">Kontakt</span></a></li>
            </ul>

        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</div><!-- /.navbar -->

Answer 1

它们间隔相等，但由于第三个li文本比其他文本更长，它显示的空间更大。

请参阅下面的CSS

.nav > li > a : padding:10px 0;

Bootstrap导航：链接之间的空间相同

1 个答案: