C#•2y ago

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

Gaming

Programming

How to stop two right-aligned elements wrapping around