我需要帮助对齐顶部导航栏中的两个 <li> 标签；一个在右边，另一个在真正的中心

Question

我遇到的问题是我的顶部导航栏有 7 个 li 标签，当屏幕尺寸低于 720 时，它只有 2 个 li 标签，全尺寸的 6 个标签进入下拉选项卡标记为 "More"。我想居中对齐不是下拉列表的 li 标签，并右对齐下拉列表 li。但是，如果我将下拉菜单向右对齐，则另一个元素不是真正的中心，它仍然受到下拉 li 标签大小的影响。砰！哈哈

提前致谢！

在html中，

HI

对我来说是"sticky"样式正在滚动哈哈

但我希望 "More" 与页面右侧对齐，而 "Virdian" 真正位于栏的中心

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

/* BIG SCREENS */
@media only screen and (min-width: 790px) {
.topbar {
  display: block;
  background-color: rgb(255,255,255);
  text-align: center;
  width: 100%;
  height: 100px;
}
 .nav see {
  display: none;
 }


.nav {
  position: sticky;
  top: 0;
  width: 100%;
  border-bottom: 2px solid rgb(64,130,109);
  border-top: 2px solid rgb(64,130,109);
 }

 /* bar color */
.nav ul {
  list-style: none;
  background-color: rgb(55,55,55);
  text-align: center;
  padding: 0;
  margin: 0;
}

/* text color */
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
  font-family: Arial;
  font-size: 20px;
  }

.nav a:hover {
  background-color: rgb(64,130,109);
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
  font-size: 20px;
  font-family: Arial;
}


  .nav li {
    width: 100px;
    border-bottom: none;
    height: 35px;
    line-height: 35px;
    display: inline-block;
 padding: 0px 0px 0px 0px;
 margin-right: -4px;
 
  }


  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus Hidden*/
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
 }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

/* SMALL SCREENS */
@media only screen and (max-width: 790px) {



.nav {
  position: sticky;
  top: 0;
  width: 100%;
  border-bottom: 2px solid rgb(64,130,109);
  border-top: 2px solid rgb(64,130,109);
 }
 
 .nav blink {
  display: none;
 }

 /* bar color */
.nav ul {
  list-style: none;
  background-color: rgb(55,55,55);
  text-align: center;
  padding: 0;
  margin: 0;
}

/* text color */
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
  font-family: Arial;
  font-size: 20px;
  }

.nav a:hover {
  background-color: rgb(64,130,109);
}

  .nav li {
    width: 100px;
    border-bottom: none;
    height: 35px;
    line-height: 35px;
    display: inline-block;
 padding: 0px 0px 0px 0px;
 margin-right: -4px;
 
  }


  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus Hidden*/
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
 }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<head>
<title>Viridian Computing</title>
</head>
<body>
 <div class="topbar">
 </div>
    <div class="nav">
      <ul>
        <li class="home"><a class="active" href="#">Viridian</a></li>
        <blink><li class="about"><a href="#">Blog</a></li>
        <li class="contact"><a href="#">Images</a></li>
  <li class="contact"><a href="#">Holder1</a></li>
  <li class="contact"><a href="#">Holder2</a></li>
  <li class="contact"><a href="#">Services</a></li></blink>
  <see><li class="tutorials"><a href="#">More</a>
          <ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Images</a></li>
            <li><a href="#">Holder1</a></li>
   <li><a href="#">Holder2</a></li>
            <li><a href="#">Holder3</a></li>
   <li><a href="#">Services</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </li></see>
      </ul>
    </div>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
  <p>HI</p>
</body>
</html>

Answer 1

.nav > ul {
  position: relative;
}
see {
  position: absolute;
  right: 10px;
}

... 似乎是您所需要的。它从文档流中获取 <see>，并将其绝对定位到右侧，将剩余的兄弟（即：Viridian）留在居中的父流中。

我需要帮助对齐顶部导航栏中的两个 <li> 标签；一个在右边，另一个在真正的中心

I need help aligning two <li> tags in a top navbar; one to the right and the other in true center

html

css

center

alignment

navbar