@media规则 - 在导航栏中强制换行，并在此行中显示以前右对齐但居中对齐的链接

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>

在您的代码中，您将品牌元素绝对定位在其他链接之上（看不到它们），并且没有撤消浮点（防止它们垂直堆叠）。