Question

我有3个列表项，我不知道如何将其放置在屏幕的右上方。

我的来源：

nav ul {
  margin: 0;
  padding-left: 85em;
  list-style: none;
  text-align: center;
}

nav li {
  display: inline-block;
  margin: 1em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2em;
  padding: .5em;
  color: white;
}

<header>
  <img class="" src="" alt="">
  <nav>
    <ul>
      <li> <a href="#">Home</a> </li>
      <li> <a href="#">About Us</a> </li>
      <li> <a href="#">Contact</a> </li>
    </ul>
  </nav>
</header>

我尝试过多种定位方式，但我做不到。

Answer 1

如果要将<ul>放置在屏幕的top-right上，然后添加到代码中

nav ul {
              position: absolute;
              top: 0;
              right: 0;
}

或

如果要在屏幕左侧放置徽标，在屏幕右侧放置 nav ，请参见以下示例：JsFiddle

HTML保持不变

CSS

img {
  width: 80px;
  height: 80px;
  float: left;
}

nav {
  float: right;
}
nav li {
  display: inline-block;
  margin: 1em;
}

OR

您可以使用 flexbox ，示例如下：JsFiddle

HTML

<header>
    <div class="navbar">
        <img class="" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="">
        <nav>
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">About Us</a> </li>
                <li> <a href="#">Contact</a> </li>
            </ul>
        </nav>
    </div>
</header>

CSS

.navbar {
    display: flex;
 }

img {
  width: 80px;
  height: 80px;
}

nav {
  margin-left: auto;
}
nav li {
  display: inline-block;
  margin: 1em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2em;
  padding: .5em;
  color: black;
  }

如何正确定位我的清单项目？

1 个答案: