如何在 CSS 中实现 <li> 和 last-class答案

【问题标题】：How to implement <li> and last-class in CSS如何在 CSS 中实现 <li> 和 last-class
【发布时间】：2023-03-11 12:00:01
【问题描述】：

我有一个工作正常的顶级菜单栏页面。我使用#nav 的 CSS 类作为顶部菜单栏。

我正在尝试实现一个仅包含两个项目的第二行菜单栏：Back 和 Home。我试图让第二个菜单项向右浮动。我正在尝试使用 last-child 这样做，但我无法让 last-child last-of-type 工作。

#nav_row2 {
    position:fixed; /* used to render menu bar fixed on top and not scroll up ALSO ALLOWS MENUS TO STAY ON TOP OF SLIDESHOW*/
}

#nav_row2 li {
    background-color: #BDB76B; /* menu background color */
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    text-align:center;
    float:left; /* For the menu buttons to float left */
    width:150px; /* Width of the buttons */
    line-height:25px; /* this is the text height of the menu items */
    margin-left:140px; /*Left margin to line up with the parent menu line */
    margin-right: 0; /* */
    list-style-type:none; /* no underscores, etc. */
}

#nav_row2 li:last-child {
    float:right; /* For the menu button to float right */
    margin-left: 0; /* */
    margin-right:140px; /*Right margin to line up with the parent menu line */
}

<div style="clear:both" ></div>
    <br />
      <ul id="nav_row2">
        <li><a href="#" onclick="history.go(-1)">Back</a></li>
        <li><a href="http://www.saintsusanna.org/">Home</a></li>
      </ul>
    <br />
<div style="clear:both" ></div>

【问题讨论】：

你想让 home 和 back 对齐吗？还是返回左侧，首页在右侧？
如果您将上面的代码插入到代码 sn-p 中，您会注意到您的 nth 选择器实际上正在工作。您是否检查过浏览器中的元素以确认没有其他元素（例如任意 br）被放置在您的无序列表中？
上没有右斜线。不要在 CSS 中使用
代替边距。
嗨，瑞秋。我想要左边的返回和右边的主页。感谢您的提问。

标签： html css css-selectors

【解决方案1】：

删除了浮动，因为它们很容易损坏。
在每个 li 中添加了position:absolute
为所有 li 分配了 left: 0; 和 top:0
然后使用兄弟选择器改变最后一个li的位置：

li + li { 右：0;左：初始； }

这个规则集说：

如果有两个兄弟 li 的更改将 right:0 规则添加到“年轻”* 兄弟并将 left:0 更改为 left: initial（默认情况下，我相信首字母实际上是 left:0，但我真的很想表明这一点如果在某些情况下可以使用initial 处理不需要的属性和/或值的继承。）

*当指代跟随的兄弟节点/元素时，我使用术语“年轻的兄弟姐妹”，而当指代先前（之前）定位的兄弟节点/元素时，我使用术语“年长的兄弟姐妹”目标节点。

添加

#nav_row2 {
  position: fixed;
  width: 350px;
}
#nav_row2 li {
  background-color: #BDB76B;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-align: center;
  width: 150px;
  line-height: 25px;
  display: inline-block;
  position: absolute;
}
li {
  top: 0;
  left: 0;
}
li + li {
  right: 0;
  left: initial;
}

<div style="clear:both"></div>
<br />
<ul id="nav_row2">
  <li><a href="http://www.saintsusanna.org/">Home</a>
  </li>
  <li><a href="#" onclick="history.go(-1)">Back</a>
  </li>

</ul>
<br />
<div style="clear:both"></div>

【讨论】：

谢谢 zer00ne。我试过这个，但将宽度从 350px 更改为 875px。我还有一个小问题。按钮显示在 875px 的两侧，这很棒，但是当屏幕调整大小时，它们会浮动在左侧。我有第一个菜单行，上面有六个按钮。第一行的 CSS 有：width:100%;左边距：-50px；位置：固定；。页面宽度为 1000 像素。浏览器窗口展开和收缩时，如何让第二行像第一行一样浮动在中间？
没问题@user3138025。如果您仍然想使用浮动，至少可以说这将是一次痛苦的经历。如果你使用position，小剂量使用效果很好，但如果使用过多，你最终会在所有事情上使用positions，这反过来又是一场噩梦。我建议你使用带有position 属性的flexbox。
如果您对 flexbox 感兴趣，请稍微阅读一下，然后使用 flexbox 解决您的问题。如果您还有其他问题（您很可能会遇到，因为它的功能一开始有点难以掌握。）请确保您像处理此问题一样发布minimal reproducible example。如果我不回答你的 flexbox 问题，Micheal_B 肯定会。
你好 zer00ne。我创建了一个新的 HTML 文件和一个新的帖子：stackoverflow.com/questions/39418788/… 再次感谢您的所有帮助

【解决方案2】：

你不需要<li>，你可以使用弹性盒子模型。

#nav {
  background-color: grey;
  color: white;
  height: 64px;
}
#nav-2 {
  background-color: cyan;
  height: 64px;
  border: 1px dotted red;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
span {
  background-color: #BDB76B; /* menu background color */
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    text-align:center;
    float:left; /* For the menu buttons to float left */
    width:150px; /* Width of the buttons */
    line-height:25px; /* this is the text height of the menu items */
    margin: 0px 16px;
    list-style-type:none; /* no underscores, etc. */
}

<div id="nav">
  Stuff here
</div>
<div id="nav-2">
  <span>home</span>
  <span>back</span>
</div>

通过更改边距，您可以控制项目离框边的距离。

有关弹性盒设计 here 和 MDN 文档 here 的数据。

【讨论】：