html - 减少边框底部长度

Question

您好我想知道我是否可以减少边框底部的长度。我有一个 div，我给那个 div 设置了 border-bottom: 2px 我想减少边框的长度。这可能吗。

我有这个导航栏，我已经为它的 div 提供了 CSS，希望减少边框的长度。我该怎么做。

这是我的html

               <div class="row">
        <div class="col-sm-12 col-xs-12 col-lg-12 col-md-12 welcome">
            <ul class="nav navbar-nav navbar-nav-primary">
                <li class="active">
                    <a href="#one" data-toggle="tab">
                        <i class="fa fa-map-marker" aria-hidden="true"></i> <span class="li-text">Location</span>
                    </a>
                </li>
                <li>
                    <a href="#two" data-toggle="tab">
                        <i class="fa fa-heartbeat" aria-hidden="true"></i> <span class="li-text">Heartbeats</span>
                    </a>
                </li>
                <li>
                    <a href="#three" data-toggle="tab">
                        <i class="fa fa-power-off" aria-hidden="true"></i>
                        <span class="li-text">Reboots</span>
                    </a>
                </li>
                <li>
                    <a href="#four" data-toggle="tab">
                        <i class="fa fa-compress" aria-hidden="true"></i>
                        <span class="li-text">Reconnects</span>
                    </a>
                </li>
                <li>
                    <a href="#five" data-toggle="tab">
                        <i class="fa fa-battery-full" aria-hidden="true"></i>
                        <span class="li-text">Charge</span>
                    </a>
                </li>

            </ul>

        </div>

这是我的CSS

        .welcome {
              border-bottom: 2px solid #bcbcbc;
              margin-left: 10px;
             }

Answer 1

将欢迎类移动到 ul 标签中，它应该会做你想做的事情:)