div转到CSS中的下一行[重复]答案

【问题标题】：Div goes to the next line in CSS [duplicate]div转到CSS中的下一行[重复]
【发布时间】：2021-07-25 05:51:03
【问题描述】：

类名 main 的 Div 转到下一行。我不需要它。这是不对的。我有带有显示块的垂直导航栏。我不知道为什么它转到下一行。

这是 HTML 代码：

/* Nav */

nav {
  padding-left: 30px;
  padding-top: 30px;
  height: 100vw;
  width: 290px;
  border-right: 1px solid #333333;
}

.nav__link {
  color: #FFFFFF;
  width: 250px;
  display: block;
  border-radius: 8px;
  padding: 6px 0px 6px 30px;
  transition: background-color .2s linear;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-top: 20px;
}

.nav__link:hover {
  background-color: #707070;
}


/* Main */

.main {
  margin-left: 300px;
}

<!-- Nav -->
<nav>
  <a href="" class="nav__link">Project 1</a>
  <a href="" class="nav__link">Project 2</a>
  <a href="" class="nav__link">Project 3</a>
  <a href="" class="nav__link">Project 4</a>
</nav>

<!-- Main -->
<div class="main">
  <div class="project">
    <h1 class="project__name">Project 1</h1>
    <p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
  </div>
</div>

各位有什么办法解决这个问题吗？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

将display: flex; 添加到其父级，当前为<body>：

body {
  display: flex;
}

block 元素占据整个宽度，因此nav 默认会将<div> 推送到下一行。

旁注：我建议使用更多语义元素，例如 <aside> 和 <main>

/* Nav */

body {
  display: flex;
}

nav {
  padding-left: 30px;
  padding-top: 30px;
  height: 100vw;
  width: 290px;
  border-right: 1px solid #333333;
  background: grey;
}

.nav__link {
  color: #FFFFFF;
  width: 250px;
  display: block;
  border-radius: 8px;
  padding: 6px 0px 6px 30px;
  transition: background-color .2s linear;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-top: 20px;
}

.nav__link:hover {
  background-color: #707070;
}


/* Main */

main {
  margin-left: 300px;
}

<aside>
  <nav>
    <a href="" class="nav__link">Project 1</a>
    <a href="" class="nav__link">Project 2</a>
    <a href="" class="nav__link">Project 3</a>
    <a href="" class="nav__link">Project 4</a>
  </nav>
</aside>

<!-- Main -->
<main>
  <div class="project">
    <h1 class="project__name">Project 1</h1>
    <p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
  </div>
</main>

【讨论】：