时间戳

首页 > 解决方案 > 移动响应式导航栏文本

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

问题描述

刚开始使用更多的 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

标签： htmlcss

解决方案

这是一个基本的响应式导航栏示例希望这有助于
编辑
解释：HTML 中的大多数元素本质上都是块级元素，这意味着它们相互堆叠。Anchor 或“a”标签是一个内联元素，这意味着它们将与其他内联元素保持在同一行。在大多数情况下，您应该从构建页面开始（仅使用 HTML），这将允许您查看哪些元素堆叠在一起（块元素）。如果您的大部分元素堆叠，这意味着它们将很容易适合小屏幕（移动设备）。我可以看到你有一个媒体查询，所以我不会浪费你的时间来解释，所以......一旦你有了房地产（平板电脑或台式机），你就想让你的一些块元素内联，内联块或浮动它们关于您希望他们如何与旁边的其他元素做出反应。 W3Schools：这里有更多关于 flexbox 的信息。如果您在评论中有任何问题或疑虑，请告诉我，我将非常乐意为您提供帮助。祝你好运，继续编码 

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>

推荐阅读