C
C#•3y ago
Brady Kelly

How to stop two right-aligned elements wrapping around

I have a navbar component with these two elements, the signin/signout links and the search form: 
<div class="navbar-header navbar-right">
  <ul class="nav navbar-nav">
    <li>
      <a *ngIf="!auth.loggedIn" [routerLink]="['auth/signin']">Login</a>
      <a *ngIf="auth.loggedIn" [routerLink]="['auth/profile']" routerLinkActive="active">Welcome {{currentUserName}}</a>
    </li>
    <li>
      <a (click)="signOut()" *ngIf="auth.loggedIn">Logout</a>
  </ul>
</div>
<form class="navbar-form navbar-right" id="searchForm">
  <div class="form-group">
    <input
      class="form-control"
      placeholder="Search Characters"
      type="text"
    />
  </div>
  <button class="btn btn-default">Search</button>
</form>
<div class="navbar-header navbar-right">
  <ul class="nav navbar-nav">
    <li>
      <a *ngIf="!auth.loggedIn" [routerLink]="['auth/signin']">Login</a>
      <a *ngIf="auth.loggedIn" [routerLink]="['auth/profile']" routerLinkActive="active">Welcome {{currentUserName}}</a>
    </li>
    <li>
      <a (click)="signOut()" *ngIf="auth.loggedIn">Logout</a>
  </ul>
</div>
<form class="navbar-form navbar-right" id="searchForm">
  <div class="form-group">
    <input
      class="form-control"
      placeholder="Search Characters"
      type="text"
    />
  </div>
  <button class="btn btn-default">Search</button>
</form>
However they seem to compete for space and the search form ends up under the links, not next to them, despite there being enough room, as in the image. How do I line these two up next to each other?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?