html - 圆形通知在不同的容器中变成 30px 宽的药丸

Question

我有这个有通知的侧导航，我有一个问题，一个通知圈是一个圆圈，但一个通知是一个 30 像素宽的药丸。两者的css几乎完全一样，唯一的区别是绝对和静态定位，但我改变了定位，问题仍然存在。附上问题图片:

很明显，我名字旁边的那个是正确的，而选择“通知”旁边的那个是不正确的。这是我名字附近的 CSS:

.notification {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $main-red;
    min-width: 14px;
    height: 14px;
    border-radius: 25px;
    color: #fff;
    font-size: 10px;
    position: absolute;
    padding: 0 2px;
    left: 13px;
    top: 78px;

}

这是“通知”一词附近的 CSS

.notification {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $main-red;
    min-width: 14px;
    height: 14px;
    border-radius: 25px;
    color: #fff;
    font-size: 10px;
    position: absolute;
    padding: 0 2px;
    left: 13px;
    top: 78px;

}

.notification.in-bar {
    position: static;
    margin-left: 5px;
    left: auto;
    top: auto;
}

这是图片的 HTML:

<div class="profile">

    <div class="person">

        <div class="notification over-picture">0</div>
        <img src="/assets/icons/profile.svg" alt="A profile icon or picture" title="Profile" class="profile-picture">

        <div class="details">

            <span class="name"><?=$extra_html['full_name']?></span>
            <span class="status <?=$extra_html['current_status']['class']?>"><?=$extra_html['current_status']['title']?></span>

        </div>

    </div>

    <div class="options">

        <img src="/assets/icons/profile-more.svg" alt="A small icon with three dots" title="More" class="more">

        <div class="shadowbox">

            <span class="status-selection selection">Set Availability Status</span>

            <div class="available-options">

                <?php 
                    foreach($extra_html['status'] as $agent_status) {
                        echo "<span class='selection $agent_status[class]' onclick='changeCurrentAgentStatus(`$agent_status[title]`, `$agent_status[class]`)'>$agent_status[title]</span>";
                    }
                ?>

            </div>

            <hr>

            <div class="status-selection selection">Notifications <span class="notification in-bar">0</span></div>

            <hr>

            <a class="selection" title="Go to your Account Preferences, <?=$extra_html[first_name]?>" href="/preferences/">Account Preferences</a>
            <a class="selection" title="Log out" href="/logout/">Log Out</a>

        </div>

    </div>

</div>

像药丸一样将通知扩展出去有什么区别？

Answer 1

在你的类中，只需添加一个属性，

.notification {
 width:14px;
}

PS:我没有看到“最小宽度”的使用。所以你可以用宽度替换它。