我想使用html和css更改導航欄span標簽以顯示在圖示下方

我創建了一個導航欄，其中包含 5 個專案，每個專案都有一個圖示和一個跨度標記，現在我想在導航欄中所有 5 個專案的圖示下方顯示跨度標記。無論我嘗試什么，都無法將它們完全放在另一個之下。

指導我實作我嘗試使用 html 和 css 實作的功能。

索引.html：

 <div class="navbar-center">
            <ul>
                <li class="text-center"><a href="#" class="active-link"><img src="images/home.png"><br><span>Home</span></a></li>
                <li><a href="#"><img src="images/network.png"><span>My Network</span></a></li>
                <li><a href="#"><img src="images/jobs.png"><span>Jobs</span></a></li>
                <li><a href="#"><img src="images/message.png"><span>Messaging</span></a></li>
                <li><a href="#"><img src="images/notification.png"><span>Notifications</span></a></li>
         
            </ul>
        </div>

樣式.css：

.navbar-center ul li{
    display: inline-block;
    list-style: none;
}
.navbar-center ul li a{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 5px 8px;
    padding-right: 5px;
    position: relative;
}

.navbar-center ul span{
    font-size: 15px;
}

/*span tag change side to bottom for .navbar-center ul li a span*/

.navbar-center ul li a img{
    width: 30px;
}

.navbar-center ul li a::after{
    content: '';
    width: 0;
    height: 2px;
    background-color: #045be6;
    position: absolute;
    bottom: -14px;
    transition: width 0.3s;
}
.navbar-center ul li a:hover::after,
.navbar-center ul li a.active-link::after{
    width: 100%;
}

uj5u.com熱心網友回復：

這是因為您在標簽上使用了 Flex。洗掉 flex 或至少添加 flex-direction: 列

.navbar-center ul li{
    display: inline-block;
    list-style: none;
}
.navbar-center ul li a {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 5px 8px;
    padding-right: 5px;
    position: relative;
    flex-direction: column;
}

.navbar-center ul span{
    font-size: 15px;
}

/*span tag change side to bottom for .navbar-center ul li a span*/

.navbar-center ul li a img{
    width: 30px;
}

.navbar-center ul li a::after{
    content: '';
    width: 0;
    height: 2px;
    background-color: #045be6;
    position: absolute;
    bottom: -14px;
    transition: width 0.3s;
}
.navbar-center ul li a:hover::after,
.navbar-center ul li a.active-link::after{
    width: 100%;
}

<div class="navbar-center">
        <ul>
            <li class="text-center">
                <a href="#" class="active-link">
                    <img src="https://picsum.photos/id/238/120/100" alt="">
                    <div>Home</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/239/120/100" alt="">
                    <div>My Network</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/240/120/100" alt="">
                    <div>Jobs</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/241/120/100" alt="">
                    <div>Messaging</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/242/120/100" alt="">
                    <div>Notifications</div>
                </a>
            </li>

        </ul>
    </div>

標籤：htmlcss

上一篇：JS密碼強度檢查器

下一篇：HTML<a>標簽在別處創建一個不可見的按鈕