css - @media 规则 - 在 NavBar 中强制换行，并在此行中显示之前右对齐的链接，但居中对齐

Question

我有一个 NavBar，我的名字左对齐(绿色背景色)，然后链接到右对齐的其他页面(无背景色)。当调整到小于 640px 时，我需要将右对齐的链接移到新行，并将所有 NavBar 内容居中。我无法获得移动到第二行的链接。

HTML:

/* menu bar */
header{
	background-color: #ffffff;
	height: 60px;
	margin: 0;
	padding:0;
  }

ul{
	list-style-type: none;
  margin: 0;
  padding: 0;
  display:block;

  }
/* align right */
li{
  float:right;
  }
/*link formatting*/
li a{
  display:block;
  padding: 8px;
  color:black;
  text-align: center;
  padding:10px 16px;
  text-decoration: none;
  font-weight: bold;
  }
/* name with background color*/
li:last-child{
  font-size: 34px; 
  background-color: #4aaaa5;
  position:absolute;
  float:left;
  }


@media screen and (max-width: 640px) {
 
li:last-child{
  font-size: 34px; 
  background-color: #4aaaa5;
  position:absolute;
  width: 100%;
  text-align: center;
  top: 0px;
  }

}

<ul>
			
	<li><a id="bottomlinks"href="index.html">About</a></li>

	<li><a id="bottomlinks"href="portfolio.html">Portfolio</a></li>

	<li><a id="bottomlinks"href="contact.html">Contact</a></li>

	<li><a href="#"> Mark Ring</a></li>
</ul>	

Answer 1

这是您尝试实现的目标的基本演示。如您所见，我稍微简化了 HTML 和 CSS。

希望对您有所帮助!

body {
  margin: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
header {
  text-align: center;
  overflow: hidden; /* clearfix */
}
.brand {
  display: block;
  background-color: #4AAAA5;
  line-height: 60px;
}

@media ( min-width: 640px ) {
  header {
    text-align: left;
    height: 60px;
  }
  .nav {
    float: right;
  }
  .nav li {
    float: left;
    line-height: 60px;
  }
  .brand {
    display: inline-block;
    padding: 0 1rem;
  }
}

<header>
  <a class="brand" href="#">Brand</a>
  <ul class="nav">
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>

在您的代码中，您将品牌元素绝对定位在其他链接之上(看不到它们)并且没有撤消 float (这使它们无法垂直堆叠)。