如何在css中向右侧进行水平导航？

Question

如何制作类似于my drawing的网页导航？我一直在尝试一些东西，但不能正确，我没有这么做。谢谢！

基本上我有一个h1标题垂直居中的标题，然后我想在右侧的按钮中添加导航到标题的底部。左右两边都有一点填充物。

Answer 1

编织： http://kodeweave.sourceforge.net/editor/#aa13d6fa8428d30f78a9685caf745cf5

正如Johannes所说display flex很可能就是你在这里寻找的东西。但是，下面的我的代码段是display: flex的替代方案。 （我省略了供应商前缀，并使用Prefix-free进行跨浏览器支持）。

＆＃13;

＆＃13;

html, body {
  height: 100%;
  margin: 0;
  font: 16px arial;
}

.heading {
  background: rgb(235,241,246);
  background: linear-gradient(135deg, rgb(235,241,246) 0%, rgb(171,211,238) 50%, rgb(137,195,235) 51%, rgb(213,235,251) 100%);
  box-shadow: inset 0 0 0.24em #3c34e0;
}
.table {
  display: table;
  width: 100%;
  height: 100px;
  text-align: center;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}

.header {
  float: left;
  margin-left: 8.32%;
}

.nav {
  margin-top: 2.84em;
}

＆＃13;

<div class="heading">
  <div class="table">
    <div class="cell">
      <h1 class="header">Website title!</h1>
      
      <div class="nav">
        <a href="#">Lorem.</a>
        <a href="#">Vitae.</a>
        <a href="#">Nihil!</a>
        <a href="#">Error.</a>
        <a href="#">Minus.</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在你的导航容器上使用这个css，它应该做你想做的事情：

nav {
  display: flex;
  justify-content: flex-end;
}