如何減少 html 中一側的邊框底部寬度？

Question

實際上我必須顯示底部欄到當前活動頁面。 我在 PHP 中使用三元運算符。底欄顯示出來但它的水平寬度有點額外。 我無法減少它的寬度。 這是它的圖片：

https://i.stack.imgur.com/9mWRJ.png

這是我使用的三元運算符：

 <ul class="navbar-nav me-auto mb-2 ms-auto mb-lg-0">
                    <li class="{{'/' == request()->path() ? 'nav-item' : ''}}">
                        <a class="nav-link" href="{{route('home')}}">Home</a>
                    </li>
                    <li class="{{'novels' == request()->path() ? 'nav-item' : ''}}">
                        <a class="nav-link" href="{{route('novels')}}">Novels</a>
                    </li>
                    <li class="{{'about' == request()->path() ? 'nav-item' : ''}}">
                        <a class="nav-link" href="{{route('about-us')}}">About Us</a>
                    </li>
                    <li class="{{'contact' == request()->path() ? 'nav-item' : ''}}">
                        <a class="nav-link" href="{{route('contact-us')}}">Contact Us</a>
                    </li>
                </ul>

這是 css：

 .nav-item {
    border-bottom:3px rgb(0, 0, 0) solid;
   margin-bottom: 19px;
   }

Answer 1

首先，問題不在 PHP（而是 Smarty 或 Blade 模板引擎）邏輯中。 問題出在您的 CSS 定義中。 您設置<li>項的邊框。

建議的解決方案

請為導航欄部分中的所有<li>使用 css class nav-item 。 因為導航欄中的所有這些<li>元素都描述了一個獨立於當前頁面是否等於其中一個這一事實的導航項。

而是使用額外的current來標記實際頁面的導航項。 我為你做的。

<ul class="navbar-nav me-auto mb-2 ms-auto mb-lg-0">
    <li class="nav-item {{'/' == request()->path() ? 'current' : ''}}">
        <a class="nav-link" href="{{route('home')}}">Home</a>
    </li>
    <li class="nav-item {{'novels' == request()->path() ? 'current' : ''}}">
        <a class="nav-link" href="{{route('novels')}}">Novels</a>
    </li>
    <li class="nav-item {{'about' == request()->path() ? 'current' : ''}}">
        <a class="nav-link" href="{{route('about-us')}}">About Us</a>
    </li>
    <li class="nav-item {{'contact' == request()->path() ? 'current' : ''}}">
        <a class="nav-link" href="{{route('contact-us')}}">Contact Us</a>
    </li>
</ul>

那么你應該使用下面的 CSS 定義：

.nav-item.current a.nav-link{
    border-bottom:3px black solid;
    padding-bottom: 10px;
}

如果它解決了您的問題，請upvote並accept這個答案。

這是我的解決方案的屏幕截圖：

Answer 2

我無法閱讀或測試您的代碼。 我們可能需要您在nav-item (li)之間聲明空格的代碼； 但是，如果之間的空間是由padding-right引起的，則將其更改為margin-right ，或者從 flex gap獲得該外觀； 它應該工作。

//no changes needed in this code
 .nav-item {
    border-bottom:3px rgb(0, 0, 0) solid;
   margin-bottom: 19px;
   }