Question

我希望将页面左侧的元素“a”和元素“ul”元素放在页面的中心。

我不想使用库或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，并通过制作放置第一个a元素其position为absolute（默认为左对齐）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

以下是使用某些显示属性的解决方案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何将两个导航元素放置在左侧和中间位置

2 个答案: