显示 flex 问题，不起作用但在父母 div 工作？

Question

我有一个我不明白的愚蠢问题我尝试从互联网上重新制作一个网站，https://delivery.tikibistro.ro/meniu，但我卡在了菜单上。我为导航的每个部分制作了一个 div，正方形，正方形（红色）对于 h1 和 h1（文本）。我对主菜单（主 div）使用固定位置显示固定，因为当我滚动时菜单需要始终保持在屏幕上，并且我使用 display flex 将其余元素定位在导航内。它正在工作，没关系，但是当我用来设置正方形（红色）内的文本（h1）的位置时，我做的不起作用。我用检查元素验证它很好，我没有像谷歌那样的显示块说。 . 感谢您的支持，我知道这可能是一个简单的问题，但我真的不知道该怎么办。 HTML:

<!-- 3.04.2023 https://delivery.tikibistro.ro/ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/main-menu.css">
    <title>Document</title>
</head>
<body>
    <!-- Main Menu START HERE -->
    <header>
        <nav class="menu">
            <div class="menu-left">
            
            </div>

            <!-- Search bar START HERE -->
            <div class="search-bar">

            </div>
            <!-- Search bar STOP HERE -->

            <div class="menu-right">
                <!-- Delivery button -->
                <div class="delivery-square"><h1 id="delivery-t">Comanda acum</h1></div>
                
                <!-- Contact the staff directly from website via email/phone/social media,etc -->
                <h1 id="contact-t">Contact</h1>
            </div>



        </nav>


    </header>


    <!-- Main Menu STOP HERE -->



    <!-- Food menu START HERE -->
    <section>
        <nav class="food-menu">
            <li>Best Sellers</li>
            <li>Mexican</li>
        </nav>
    </section>
    <!-- Food menu STOP HERE -->


</body>
</html>l

风格菜单：

 .menu{
    /* if position is fixed,the menu will always be on the screen */
    
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    background: #131315;
    position: fixed;
    top: 0;
    z-index: 98;
} 
.menu-right{
    margin: 0;
    padding: 0;
    display:flex;
    justify-content: center;
    width: 100%;
    height: 50px;
    background-color: black;

}

.delivery-square{
    width: 156px;
    height: 48px;
    background: #f53b34;
    box-shadow: 0 3px 6px rgba(0,0,0,.1607843137254902);
    border-radius: 10px;
    margin-right: 28px;
    font-size: 16px;
    font-weight: 700;
    display:inherit;
    justify-content: inherit;
}

#delivery-t{
    display: inherit;
    justify-content: flex-end;
    opacity: 1;
    margin-right: 28px;
    font-size: 18px;
    font-weight: 700px;
    color: #fff;
    letter-spacing: 0;
    display:inherit;
    justify-content: inherit;
}

#contact-t {
    position:inherit;
    right: 0px;
    color: red;
}

.food-menu{
    position: absolute;
    bottom: -650px;
    
}

风格的身体：

body, html {
    font-family: SF Pro Text;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #131315;
    overflow-x: hidden;
    /* position: relative; */
}

正如我所说，显示 flex 工作，但当我使用文本（h1）时不再工作。我尝试将正方形和 h1 组合在一个 div 中但不起作用，我尝试重新制作但不没用。

Answer 1

你用了“！重要吗？”：

#delivery-t{
    display: inherit !important;
    justify-content: flex-end !important;
....

显示 flex 问题，不起作用但在父母 div 工作？

问题描述投票：0回答：1

1个回答

最新问题

显示 flex 问题，不起作用但在父母 div 工作？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1