-1

如何class="active"在两张图片中将我的图标移到最右端和最左端的徽标？这个网页基本上专注于响应式导航栏。

我想要什么时候我的最大宽度：700px；我的标志和下拉图标应该是（图 2），但标志在最左边，下拉在最右边。

同样，在图像 1 中，class="active" 位于最右侧，徽标位于最左侧。

我是 HTML 和 CSS 的新手。

我只能使用 HTML 和 CSS，不能使用 JavaScript 或 Bootstrap。

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.navbar{
    background-color: #6D6A6A;
    display: flex;
}

.navbar a{
    color: white;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    padding: 14px 28px;
}

.navbar a:hover{
    background-color: white;
    color: black;
}

.content p{
    text-align: justify;
    margin: 10px;
    padding: 10px;
}

#toggle{
    display: none;
}

.togglearea{
    background-color: #6D6A6A;
    border-bottom: 2px solid white;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
}

.togglearea label{
    background-color: white;
    height: 45px;
    width: 50px;
    color: black;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.togglearea label span{
    background-color: black;
    height: 4px;
    width: 70%;
    margin: 2px 0px;
}

.togglearea{
    display: none;
}

@media screen and (max-width: 700px)
{
    .navbar{
        flex-direction: column;
        display: none;
    }
#toggle:checked + .navbar{
        display: flex;
    }
.togglearea{
        display: flex;
    }
    .navbar .logo{
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="togglearea">
        <img class="togglelogo" src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="cdac logo" height="150px" width="250px">
        <label for="toggle">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>

    <input type="checkbox" id="toggle" class="check">

    <div class="navbar">
        <img class="logo" src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="cdac logo" height="150px" width="250px">
        <a class="active" href="#">About Us</a>
        <a class="active" href="#">Logout</a>
    </div>

    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sunt corporis, ex alias nobis dicta laborum aperiam deserunt dolore doloremque? Vero reprehenderit, distinctio necessitatibus eius deleniti saepe accusantium nesciunt. Ipsum, amet, earum sit veritatis saepe veniam non fuga illo nobis quos voluptatibus nesciunt eveniet eius eum a ducimus sapiente rem quidem perspiciatis facilis odit eos architecto dolorem quis porro. Voluptas a perferendis quod facilis excepturi, dolore ab, perspiciatis vel, quidem ad tenetur aspernatur pariatur minima deserunt consequatur sit culpa quos earum ipsum possimus eum vero! Quae, iusto, rerum? Maxime inventore porro facere distinctio totam, a quis ipsum doloremque pariatur quibusdam sint, magnam quo, odio non dolorem temporibus in veniam expedita. Nisi nobis labore illo rem maiores a dicta dolor magni ducimus, nulla et quas iure in rerum quam aut culpa quod, accusantium qui ipsum, numquam saepe. Et sit modi maiores, eligendi. Architecto mollitia praesentium, quaerat omnis nulla voluptates dignissimos sapiente natus quos incidunt saepe eligendi, sunt suscipit minus quasi culpa asperiores perspiciatis quis possimus, voluptatem quisquam cum. Minima ipsa obcaecati odit debitis laudantium ut possimus, quam accusantium eum reiciendis! Numquam, repellendus, accusantium. Ab corporis, esse quidem nobis alias omnis accusantium laborum ducimus mollitia vitae provident quia magni velit, quos aliquam?
        </p>
    </div>
</body>
</html>

在此处输入图像描述

在此处输入图像描述

4

1 回答 1

1

所以根据你的解释，我解决了你的麻烦。

我将您设置a.active为我在课堂上调用的容器.containerActive。

然后我将这个类设置如下：

.containerActive{
  display: flex;
  align-items: center;
  margin-left:auto;
}
@media screen and (max-width: 700px)
{
   .containerActive{
      flex-direction: column;
      margin-left:0;
   }
}

所以这是链接

对于 img，我只添加了：

.togglelogo{
    margin-right:auto;
  }

将其保持在 700px 宽度屏幕下方的右侧

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.navbar{
    background-color: #6D6A6A;
    display: flex;
}

.navbar a{
    color: white;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    padding: 14px 28px;
}

.navbar a:hover{
    background-color: white;
    color: black;
}

.content p{
    text-align: justify;
    margin: 10px;
    padding: 10px;
}

#toggle{
    display: none;
}

.togglearea{
    background-color: #6D6A6A;
    border-bottom: 2px solid white;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
}

.togglearea label{
    background-color: white;
    height: 45px;
    width: 50px;
    color: black;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.togglearea label span{
    background-color: black;
    height: 4px;
    width: 70%;
    margin: 2px 0px;
}

.togglearea{
    display: none;
}

.containerActive{
  display: flex;
  align-items: center;
  margin-left:auto;
}
@media screen and (max-width: 700px)
{
   .navbar{
        flex-direction: column;
        display: none;
    }
  #toggle:checked + .navbar{
        display: flex;
    }
  .togglearea{
        display: flex;
  }
  .togglelogo{
    margin-right:auto;
  }
  .navbar .logo{
      display: none;
  }
  .containerActive{
    flex-direction: column;
    margin-left:0;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="togglearea">
        <img class="togglelogo" src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="cdac logo" height="150px" width="250px">
        <label for="toggle">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>

    <input type="checkbox" id="toggle" class="check">

    <div class="navbar">
        <img class="logo" src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="cdac logo" height="150px" width="250px">
        <div class="containerActive">
          <a class="active" href="#">About Us</a>
          <a class="active" href="#">Logout</a>
        </div>
    </div>

    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sunt corporis, ex alias nobis dicta laborum aperiam deserunt dolore doloremque? Vero reprehenderit, distinctio necessitatibus eius deleniti saepe accusantium nesciunt. Ipsum, amet, earum sit veritatis saepe veniam non fuga illo nobis quos voluptatibus nesciunt eveniet eius eum a ducimus sapiente rem quidem perspiciatis facilis odit eos architecto dolorem quis porro. Voluptas a perferendis quod facilis excepturi, dolore ab, perspiciatis vel, quidem ad tenetur aspernatur pariatur minima deserunt consequatur sit culpa quos earum ipsum possimus eum vero! Quae, iusto, rerum? Maxime inventore porro facere distinctio totam, a quis ipsum doloremque pariatur quibusdam sint, magnam quo, odio non dolorem temporibus in veniam expedita. Nisi nobis labore illo rem maiores a dicta dolor magni ducimus, nulla et quas iure in rerum quam aut culpa quod, accusantium qui ipsum, numquam saepe. Et sit modi maiores, eligendi. Architecto mollitia praesentium, quaerat omnis nulla voluptates dignissimos sapiente natus quos incidunt saepe eligendi, sunt suscipit minus quasi culpa asperiores perspiciatis quis possimus, voluptatem quisquam cum. Minima ipsa obcaecati odit debitis laudantium ut possimus, quam accusantium eum reiciendis! Numquam, repellendus, accusantium. Ab corporis, esse quidem nobis alias omnis accusantium laborum ducimus mollitia vitae provident quia magni velit, quos aliquam?
        </p>
    </div>
</body>
</html>

于 2020-09-24T19:53:01.187 回答