Question

我正在制作一个网页，我的标题位于左侧，菜单选项位于左侧，标题位于中间，并具有登录/注册页面的链接。这是img：https://ibb.co/z6R1h6w 不幸的是，左侧的登录和注册链接换行了，我不希望这样。我尝试了以下方法：

  float: right;

  text-align: right;

  vertical-align: text-top !important;

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

提前欢呼

Answer 1

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

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/>的新行中，但我不想这样做

2 个答案: