为响应式网站使用绝对排名是一件坏事吗？ [关闭]

Question

我想在导航栏旁边放置我的h1标签。我使用绝对位置来完成此操作，但是我注意到很难响应，因为我必须使用很多媒体查询。另外，我读到absolute是不好的，因为它将忽略正常流程。除了绝对位置，还有其他方法吗？

*,
h1 {
  margin: 0;
  padding: 0;
}

.mainNav {
  position: static;
  margin-top: 3%;
  margin-left: 2%;
  width: 50%;
}

h1 {
  top: 7%;
  right: 10%;
  position: absolute;
}

.mainNav ul {
  list-style-type: none;
  /* removed padding margin 0 */
  display: flex;
  flex-flow: row wrap;
  background-color: #ECECEC;
}

.mainNav li {
  flex-grow: 1;
  width: calc(100%/3);
  font-size: 10px;
}

.mainNav a {
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 50px;
  min-width: 100%;
  line-height: 50px;
  text-decoration: none;
  display: block;
  color: black;
  text-decoration: none;
}

.mainNav ul li:nth-child(1) a,
.mainNav ul li:nth-child(2) a,
.skillsDiv {
  text-align: center;
}

.mainNav a:hover {
  background-color: black;
  color: #ECECEC;
}

p{
background-color:red;}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <!doctype html>
  <html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Design 1</title>
    <meta name="description" content="Content about myself">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/normalise.css">
    <link rel="stylesheet" href="css/design1Style.css">
  </head>

  <body>
    <nav class="mainNav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="skills.html">Skills</a></li>
        <li><a href="qualifications.html">Qualifications</a></li>
      </ul>
    </nav>

    <div id="container">
      <main>
        <header>
          <h1>Interests</h1>
          <div>
            <p>ABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDEABCDE</p>
          </div>



    </div>

    </header>
    </main>

  </body>

  </html>

Answer 1

您可以使用float或flexbox。

您的问题的答案可能在这里：How to place two divs next to each other?

body {
  display:flex;
}

.mainNav ul {
  display: flex;
  justify-content: center;
  background-color: #ECECEC;
  border-radius: 25px;
  padding: 0;
}

.mainNav ul li {
  font-size: 16px;
  text-align: center;
  font-size: 16pt;
  list-style-type: none;
  padding: 20px;
}

.mainNav ul li:hover {
  background-color: #000000;
}

.mainNav ul li:hover a{
  color: #FFFFFF;
}

.mainNav ul li a {
  color: #000000;
  text-decoration: none;
}

<!doctype html>
<html lang="en">
<body>
  <nav class="mainNav">
    <ul>
      <li><a href="index.html">nav1</a></li>
      <li><a href="skills.html">nav2</a></li>
      <li><a href="qualifications.html">nav3</a></li>
    </ul>
  </nav>
  <div id="container">
    <main>
      <header>
        <h1>Move to top right</h1>
        <div>
          <picture>
            <img src="images/images.png" alt="" height="150" width="220">
          </picture>
          <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
        </div>
      </header>
      <div>
        <article>
          <h2>H2 tag</h2>
          <div>
            <picture>
              <img src="images/images.png" alt="" height="150" width="220">
            </picture>
            <p>
              abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
            </p>
          </div>
        </article>

为响应式网站使用绝对排名是一件坏事吗？ [关闭]

问题描述投票：-3回答：1

1个回答

最新问题

为响应式网站使用绝对排名是一件坏事吗？ [关闭]

问题描述 投票：-3回答：1

1个回答

最新问题

问题描述投票：-3回答：1