屏幕不同侧的两个列表

Question

我正在尝试制作标题，其中包含一些项目：导航页面的链接以及登录/注册的链接。我正在用两个单独的列表来做这个。它看起来像这样：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#header #title {
  font-size: 2em;
  text-align: center;
}

.header.menu li {
  font-size: 1.4em;
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

<div id="header">
  <div id="title">
    <h1>webpage title</h1>
  </div>
  <ul class="header menu" id="header-menu-1">
    <li>about</li>
    <li>pricing</li>
    <li>contact</li>
  </ul>
  <ul class="header menu" id="header-menu-2">
    <li>log in</li>
    <li>sign up</li>
  </ul>
</div>

但是，所有项目都与左侧对齐。我尝试过使用：

.header.menu #header-menu-1 ul {
  float: left;
}

.header.menu #header-menu-2 ul {
  float: right;
}

但没有效果。

我如何分开它们 - 一个在左边，一个在右边？

Answer 1

您的选择器错误，应该没有空格且ul不是孩子。最好先指定id，然后指定class：

ul#header-menu-1.header.menu {
  float: left;
}

ul#header-menu-2.header.menu {
  float: right;
}

实际上你只需要id：

#header-menu-1 {
  float: left;
}

#header-menu-2 {
  float: right;
}

Answer 2

您的CSS选择器写错了。

#header-menu-1 ul将选择ID <ul>元素内的#header-menu-1元素（其子元素）。

相反，您可以简单地使用#header-menu-1作为您的选择器，因为ID就像您一样具体。

将来，如果要组合标记和类，可以这样做：ul.classname。

＆＃13;

＆＃13;

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#title {
  font-size: 2em;
  text-align: center;
}

.header.menu li {
  font-size: 1.4em;
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

#header-menu-1 {
  float: left;
}

#header-menu-2 {
  float: right;
}

＆＃13;

<div id="header">
  <div id="title">
    <h1>webpage title</h1>
  </div>
  <ul class="header menu" id="header-menu-1">
    <li>about</li>
    <li>pricing</li>
    <li>contact</li>
  </ul>
  <ul class="header menu" id="header-menu-2">
    <li>log in</li>
    <li>sign up</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

1）删除.menu和#header-menu-1（以及#header-menu-2）之间的空格。

2）从最后一个选择器中删除ul。

更改：

.header.menu #header-menu-1 ul {
  float: left;
}

.header.menu #header-menu-2 ul {
  float: right;
}

要

.header.menu#header-menu-1 {
  float: left;
}

.header.menu#header-menu-2{
  float: right;
}

＆＃13;

＆＃13;

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#header #title {
  font-size: 2em;
  text-align: center;
}

.header.menu li {
  font-size: 1.4em;
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

.header.menu#header-menu-1 {
  float: left;
}

.header.menu#header-menu-2 {
  float: right;
}

＆＃13;

<div id="header">
  <div id="title">
    <h1>webpage title</h1>
  </div>
  <ul class="header menu" id="header-menu-1">
    <li>about</li>
    <li>pricing</li>
    <li>contact</li>
  </ul>
  <ul class="header menu" id="header-menu-2">
    <li>log in</li>
    <li>sign up</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;