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;
  }
}

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

概念的证明：https://imgur.com/a/Ho5JENI 现在做什么：https://imgur.com/a/j2oWwlm

Answer 1

下面是一个基本的导航栏响应例如希望这有助于
编辑
说明：HTML固有的大多数元素都是块级元素，这意味着它们彼此堆叠。锚点或“ a”标记是一个内联元素，这意味着它们将与其他内联元素保持在同一行。在大多数情况下，您应该首先设计页面页面（仅使用HTML），这将使您看到哪些元素彼此堆叠（块元素）。如果您的大多数元素堆叠在一起，则意味着它们很容易放在小屏幕（移动设备）上。我可以看到您有一个媒体查询，所以我不会浪费您的时间来解释……当您拥有不动产（平板电脑或台式机）后，便希望将某些块元素进行内联，内联块化或浮动化处理你如何希望他们和他们身边的其他元素反应。最简单的方法（在这种情况下）是使用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>

移至自适应导航栏文本

1 个答案: