html - 移动响应式导航栏文本

Question

刚开始使用更多 css，使用 w3schools 上的示例制作响应式导航栏。我将它的一部分移动到了我想要的位置(屏幕较小时的图标)，但我不知道如何移动实际的导航栏文本。

不完全确定我应该做什么，尝试了几件事，但由于我的知识有限，一切都变得不稳定。我很确定我知道编辑将在哪里进行，如果我是对的，它将在 css 的这一部分进行

  .navbar.responsive a {
    float: right;
    display: block;
    text-align: left;
  }

这是完整的 CSS

@charset "UTF-8";
/* CSS Document */
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  float: right;
  margin-top: 50px;
  margin-right: 50px;
}

.navbar a {
  display: block;
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #C58485;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .navbar a, .dropdown .dropbtn {
	display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
	position: absolute;
	top:10px;
	right: 45%;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {position: static;}
  .navbar.responsive .icon {
    float: right;
    display: block;
	top:10px;
	right: 45%;
  }
  .navbar.responsive a {
    float: right;
    display: block;
    text-align: left;
  }
  .navbar.responsive .dropdown {float: none;}
  .navbar.responsive .dropdown-content {position: absolute;}
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

基本上它的作用是当我在一个较小的窗口中弹出响应页面时，我希望文本居中并在您单击 3 行下拉菜单时直线穿过。

概念验证:https://imgur.com/a/Ho5JENI它现在做什么:https://imgur.com/a/j2oWwlm

Answer 1

这是一个基本的响应式导航栏示例，希望对您有所帮助
编辑
说明:本质上，HTML 中的大多数元素都是 block 级元素，这意味着它们相互堆叠。 anchor 或“a”标签是内联元素，这意味着它们将与其他内联元素保持在同一行。在大多数情况下，您应该首先构建您的页面(仅使用 HTML)，这将允许您查看哪些元素堆叠在彼此之上( block 元素)。如果您的大部分元素堆叠在一起，这意味着它们很容易适合小屏幕(移动设备)。我可以看到你有一个媒体查询，所以我不会浪费你的时间来解释，所以......一旦你有了不动产(平板电脑或台式机)，你就会想要使你的一些 block 元素内联，内联 block 或 float 它们 depeding关于您希望他们如何与旁边的其他元素使用react。最简单的方法(在本例中)是使用 flexbox，它非常适合在 2D 空间中布置对象。 W3Schools: More information on flexbox here从那里开始就是所有的视觉和体验偏好。如果您在评论中有任何问题、意见或疑虑，请告诉我，我将非常乐意为您提供帮助。祝你好运，继续编码

nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}


@media only screen and (min-width: 768px) {
 ul {
  display: flex;
 }
 
 li a {
  padding: 1rem;
 }
}

<nav>
<button>&#9776;</button>
<ul>
<li><a href="#">home<a></li>
<li><a href="#">about<a></li>
<li><a href="#">portfolio<a></li>
<li><a href="#">prints<a></li>
<li><a href="#">contact<a></li>
<ul>
<nav>