Как бы я переместил элементы navbar на левую сторону, кроме элемента «Account» на панели навигации, и поместил бы его на правую сторону? - PullRequest
Новая
       0

Как бы я переместил элементы navbar на левую сторону, кроме элемента «Account» на панели навигации, и поместил бы его на правую сторону?

1 голос
/ 02 мая 2020

Как бы я go рассказал о том, чтобы держать каждый элемент navbar слева, кроме элемента "Account" и поместить его справа, css равно 

body {
    font-family: 'Arial Narrow Bold', sans-serif;
}

.navmenu {
    width: 100%;
    display: flex;
    background-color: rgb(28, 83, 231);
    justify-content: left;
}

.navmenu > ul > li {
    float: left;
    color: rgb(255,255,255);
    font-size: 18px;
    margin-right: 50px;
}

.navmenu > ul > li:hover {
    transform: scale(1.03);
    color: rgb(119, 151, 240);
    transition: 0.4s;
}
.navmenu > ul > li:not(:hover) {
    transform: scale(1);
    color: rgb(255,255,255);
    transition: 0.4s;
}

@media screen and (max-width: 950px) {
    .navmenu > ul > li {
        font-size: 15px;
        margin-right: 33px;
    }
}

html это 

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/design.js"></script>
    </head>
    <body style="margin: 0;">
        <div class="navmenu">
            <ul style="list-style: none;" class="nav">
                <li>Home</li>
                <li>Purchase</li>
                <li><a>Account</a></li>
            </ul>
        </div>
    </body>
</html>

При необходимости скрипка: https://jsfiddle.net/56qtnu0c/ Помощь была бы признательна, я не знаю, как это сделать, также, если бы вы могли сделать это для меня и сказать мне, что я сделал неправильно, это было бы будь крут.

Ответы [ 2 ]

4 голосов
/ 02 мая 2020

Вам нужно поместить элемент учетной записи на другой адрес, например 

 <div class="navmenu">
        <ul style="list-style: none;" class="nav">
            <li>Home</li>
            <li>Purchase</li>
        </ul>
        <ul style="list-style: none;" class="nav">
            <li><a>Account</a></li>
        </ul>
    </div>

, тогда ваш класс navmenu justify-content: space-between;

.navmenu {
  width: 100%;
  display: flex;
  background-color: rgb(28, 83, 231);
  justify-content: space-between;
}
0 голосов
/ 02 мая 2020

Вы не можете поместить свой элемент, который будет позиционироваться по-другому, в один тег ul, однако вы можете достичь этого, используя абсолютное положение, и все, но не будет реагировать. Я сделал несколько исправлений, таких как разделение учетной записи, и добавил несколько дополнительных строк кода CSS, чтобы учетная запись всегда отображалась в правом верхнем углу панели навигации. Надеюсь, что это решит вашу проблему. 

body {
    font-family: 'Arial Narrow Bold', sans-serif;
}

.navmenu {
    width: 100%;
    display: flex;
    background-color: rgb(28, 83, 231);
}

.navmenu > ul{
flex-basis: 80%
}



.navmenu > ul > li {
    float: left;
    color: rgb(255,255,255);
    font-size: 18px;
    margin-right: 50px;
}

.navmenu > ul > li:hover {
    transform: scale(1.03);
    color: rgb(119, 151, 240);
    transition: 0.4s;
}
.navmenu > ul > li:not(:hover) {
    transform: scale(1);
    color: rgb(255,255,255);
    transition: 0.4s;
}

.navmenu .account{
  list-style: none;
  flex-basis: 20%;
}

.navmenu .account li{
  float: right
}

@media screen and (max-width: 950px) {
    .navmenu > ul > li {
        font-size: 15px;
        margin-right: 33px;
    }
}
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/design.js"></script>
    </head>
    <body style="margin: 0;">
        <div class="navmenu">
            <ul style="list-style: none;" class="nav">
                <li>Home</li>
                <li>Purchase</li>
            </ul>
            
            <ul class='account'>
             <li><a>Account</a></li>
            </ul>
            
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...