Question

我将如何继续将除“ 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/将不胜感激，我不知道该怎么做，如果您能为我做这件事，并告诉我我做错了什么，那太好了。

Answer 1

您需要将帐户项放到其他ul上

content-length: 35
content-type: application/json
date: Sun, 03 May 2020 01:51:15 GMT
status: 400
x-amz-apigw-id: L7p_IEbuoAMFeaA=
x-amzn-errortype: BadRequestException
x-amzn-requestid: 7ed06b7d-951f-4774-9bfa-62f307ee5974

然后您的导航菜单班<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>

justify-content: space-between;

Answer 2

您不能将要不同放置的元素放在单个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>

我如何将导航栏元素（除导航栏的“帐户”元素外）移至左侧，并将其移至右侧？

2 个答案: