Div 元素在没有 <br> 的新行上，但我不想那样做

Question

我正在制作一个网页，我有一个 header，左边是菜单选项，中间是标题，link 到 logIn/signUp 页面。这是一个 img：https://ibb.co/z6R1h6w 不幸的是，左侧的登录和注册 link 换行了，我不希望这种情况发生。我尝试了以下方法：

  float: right;

  text-align: right;

  vertical-align: text-top !important;

代码：https://hastebin.com/pesuhemulo.xml

提前加油

Answer 1

您可以使用 css 网格。在下面的代码片段示例中，您可以看到中心列延伸到未使用的宽度，所有 3 个 div 都在 1 行上：

header {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}

header .header-title {
  text-align: center;
  background: #f0f0f0;
}

header .left {
  text-align: left;
}

header .right {
  text-align: right;
}

<header>
  <div class="left">Nav</div>
  <div class="header-title">Header</div>
  <div class="right">Login</div>
</header>

修改 grid-template-columns 以更改列宽。

Answer 2

您不应该再使用浮动布局，它们对于大多数用例来说已经过时了。

我建议使用 Flexbox。这是一个小例子：

header, header #menu {
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
}

#menu li {
  margin: 0 20px;
}

<header>
<p>Menu</p>
<p>Image</p>
<ul id="menu">
<li>link A</li>
<li>link B</li>
</ul>
</header>

您可以将 nowrap 添加到 flex-flow 以确保它们始终在同一行中。

希望对您有所帮助。

Div 元素在没有 <br> 的新行上，但我不想那样做

Div element is on new line without <br> but i don't want to do that

html

css

text-align