我的 css 和 html 代码有问题：元素都是无序且重叠的

问题描述 投票：0回答：1

这个 html 和 css 页面的所有元素都是无序的。所有元素都与其他元素重叠，我不希望这样。我必须在没有页面内容的情况下复制此网站。我现在正在做标题。我还必须使主体最大 1200px 并居中。

@font-face {
  font-family: chomsky;
  src: url(fonts/Chomsky.otf)
}

body {
  max-width: 1200px;
  margin: auto;
  font-family: nyt-franklin, sans-serif;
  font-size: 14px;
}

header,
footer,
aside,
nav,
article {
  display: block;
}

header {
  text-align: center;
  position: absolute;
  top: 0;
}

h1 {
  font-family: chomsky, sans-serif;
  margin-top: 35px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 80px;
}

h3 {
  font-family: nyt-franklin, sans-serif;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 10px;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
}

#titolo {
  color: black;
  text-decoration: none;
}

#nav-search {
  position: absolute;
  left: 5px;
  top: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}

#search {
  border: none;
  background-color: #0000;
  padding-right: 15px;
  cursor: pointer;
}

#search-bar {
  height: 30px;
  visibility: hidden;
}

#search:active #search-bar #go {
  visibility: visible;
}

#search:hover {
  background-color: lightgray;
}

#go {
  background-color: cadetblue;
  color: white;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  padding: 5px 12px;
  margin-left: 10px;
  height: 35px;
  visibility: hidden;
}

#today {
  position: absolute;
  left: 10px;
  top: 35px
}

#buttons {
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 10px;
  top: 5px;
}

.top-button {
  background-color: cornflowerblue;
  color: white;
  border-radius: 2px;
  font-size: 14px;
  padding: 5px 12px;
  margin-left: 15px;
  cursor: pointer;
}

.column {
  display: flex;
  flex-direction: column;
}

.column-title {
  font-weight: bold;
  color: grey;
}

#dropdown-menu a:hover {
  color: black;
  text-decoration: underline;
}

#dropdown-menu {
  max-width: 100%;
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dropdown {
  position: relative;
  display: inline-block;
  word-spacing: -40px;
  cursor: pointer;
}

.submenu {
  position: absolute;
  width: 100%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  border-top: 1px solid #ebebeb;
  display: grid;
  grid-column-gap: 5px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.submenu a {}

.dropdown:hover .submenu {
  position: fixed;
  display: compact;
  visibility: visible;
}

.down-arrow {
  background-color: white;
}
<header>
  <h1><a id="titolo" href="index.html">Lorem ipsum</a></h1>
  <div id="buttons">
    <a href=""><button class="top-button"><b>SUBSCRIBE HERE</b></button></a>
    <a href=""><button class="top-button"><b>Log In</b></button></a>
  </div>

  <div id="nav-search">
    <button id="search"><img src="img/search-icon.png" width="15" height="15" alt="this is a search button"></button>
    <input type="text" id="search-bar" placeholder="Search...">
    <button id="go"><b>GO</b></button>
  </div>

  <div id="today">
    <p>Data di oggi</p>
    <a href="">Today's Paper</a>
  </div>

  <nav id="dropdown-menu">
    <ul>
      <li class="dropdown">
        <a href="">Lorem <button class="down-arrow"><img src="img/down-arrow.png" alt="this is a down arrow" height="10px"></button></a>
        <div class="submenu">
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="dropdown">
        <a href="">Lorem <button class="down-arrow"><img src="img/down-arrow.png" alt="this is a down arrow" height="10px"></button></a>
        <div class="submenu">>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>>
          <div class="column">
            <h3 class="column-title">Lorem</h3>
            <ul>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
              <li><a href="">Lorem Ipsum</a></li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</header>

<main>

</main>

<footer>

</footer>

html css
1个回答
0
投票

从更改 CSS 开始：

将 5 个“绝对”设置更改为“内联块”：

然后你会看到它现在已经正确布局了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.