Блог

Я пытаюсь сделать довольно простой навигации с нуля, но я никак не могла, какой ширины, и я хочу, .navbarDropBtn чтобы иметь ширину .navbarMain , но это только как текст, я пробовал переключение порядке их появления в HTML, но мне нужно .navbarText на вершине, потому что я добавляю плавный переход непрозрачности, так что я могу переходе градиентов.

мой вопрос в том, как я могу установить ширину, чтобы она была 100% родительской. Я не хочу использовать что-либо, кроме % или em потому px , что это вызовет проблемы с различными размерами экрана. и использование конкретного 120% вызовет ту же проблему.

     .navbarBody {
        width:100%;
        height: 46px;
        position: sticky;
    }
    .navbarButton, .navbarBody {
        background: linear-gradient(0deg, #2a2a2a, #4a4a4a);
        z-index: 100;
    }
    .navbarButton, .navbarMain {
        float:right;
        text-align:center;
        padding: 14px 16px;
        color: #fff;
        position:relative;
    }
    .navbarButton:hover, .navbarMain:hover {
        cursor: pointer;
        color:black;
        transition: .25s;
    }
    .navbarText {
        width:100%;
        height:100%;
        position: relative;
    }
    .navbarButton:hover .navbarText {
        color:black;
        }
    .navbarMain {
        background: linear-gradient(0deg, #296a29, #4aca4a);
    }
    .navbarDropBtn {
        width: 100%;
        height: 100%;
background-color: white; /*example only */
    }
/*hover effect*/
.navbarButton::before, .navbarMain::before {
    content: "";
    opacity:0;
    background: linear-gradient(0deg, #999, #fff);
    top:0px;
    left:0px;
    position: absolute;
    width:100%;
    height:100%;
}
.navbarMain::before {
    background: linear-gradient(0deg, #3a8a3a, #aafaaa);
}
.navbarButton:hover::before, .navbarMain:hover::before {
    opacity:1;
    transition:opacity .25s, content .05s;
}





 <div class="navbarBody">
                <div class="navbarMain" onclick="dropBtn()">
                    <div class="navbarText">
                        <div class="navbarDropBtn">
                far right special boi
                        </div>
                    </div>
                </div>
                <div class="navbarButton">
                    <div class="navbarText">
                test 1
                    </div>
                </div>
                <div class="navbarButton">
                    <div class="navbarText">
                test 1 1
                    </div>
                </div>
            </div>
 

это потому, что вы добавили дополнение в navbarMain. если вы удалите отступы, вы увидите, что navbarDropBtn такой же широкий, как navbarMain, возможно, вам следует добавить к нему отступы вот так:

  .navbarMain {
     padding: 14px 0;
 }
 

таким образом, у него не будет отступов справа и слева, поэтому он будет таким же широким, как navbarDropBtn