Chcę elementu "A" na lewo od strony i elementu "UL" do środka strony.

Nie chcę korzystać z biblioteki ani opcji float: left. Również display: inline; z elementem ul nie działa, z innymi elementami działa dobrze.

  <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>
0
ssss 17 luty 2017, 17:33

2 odpowiedzi

Najlepsza odpowiedź

Oto jeden możliwy rozwiązanie (napisałeś Cię, że chcesz ul} wyśrodkowane): sprawia, że ul a wyśrodkowanym inline-block i umieszcza pierwszy element a pozostawiony przez uczynienie jego {{x3}. X4}} Bądź absolute (i domyślnie wyrównany w lewo).

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>
2
Johannes 17 luty 2017, 14:50

Oto rozwiązanie poniżej, używając niektórych właściwości wyświetlania.

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>
1
Sahil Dhir 17 luty 2017, 14:38