CODEWITHSUNDEEP
htmlcss
devsin
devsin

Reputation: 155

How can I place two nav elements left and center

I want to element 'a' to left of the page and element 'ul' to center of the page.

I don't want to use a library or a float: left option. Also display: inline; with ul element is not working, with other elements it works fine.

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

Upvotes: 0

Views: 57

Answers (2)

Johannes
Johannes

Reputation: 67814

Here is one possible solution (you wrote you want the ul centered): It makes the ula centered inline-block and places the first a element left by making its position be absolute (and by default left-aligned).

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>

Upvotes: 2

Sahil Dhir
Sahil Dhir

Reputation: 4250

Here is the solution below, using some display properties.

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>

Upvotes: 1

Related Questions