我该如何将两个Nav元素左和中心放置

Question

我想在页面中心的页面和元素'ul'的左侧元素'a'到页面中心。

我不想使用库或float: left选项。另外display: inline;带有ul元素不起作用，其他元素可以正常工作。

  <nav class="nav">
    <a href="">Brand</a>
    <ul>
      <li><a [routerLink]="['/hot']">Hot</a></li>
      <li><a [routerLink]="['/trend']">Trend</a></li>
      <li><a [routerLink]="['/new']">New</a></li>
    </ul>
  </nav>

Answer 1

这是一个可能的解决方案（您写的是您想要ul中心）：它使ul成为中心的inline-block，并通过使其position为CC_8（默认情况下）放置第一个a元素（并且左对齐）。

nav {
  position: relative;
}
nav>a {
  position: absolute;
}
nav ul {
  position: relative;
  text-align: center;
}
nav ul li {
  display: inline;
}

<nav class="nav">
  <a href="">Brand</a>
  <ul>
    <li><a [routerLink]="['/hot']">Hot</a></li>
    <li><a [routerLink]="['/trend']">Trend</a></li>
    <li><a [routerLink]="['/new']">New</a></li>
  </ul>
</nav>

Answer 2

这是下面的解决方案，使用一些显示属性。

ul,li{ margin:0px; padding:0px; list-style:none;}
.nav ul{display:inline}
.nav ul li{ display:inline-block;}

<nav class="nav">
    <a href="">Brand</a>
    <ul>
      <li><a [routerLink]="['/hot']">Hot</a></li>
      <li><a [routerLink]="['/trend']">Trend</a></li>
      <li><a [routerLink]="['/new']">New</a></li>
    </ul>
  </nav>