div高度影响同一行中的相邻项目

Question

我遇到样式问题，其中我的头像图像高度会影响其旁边的其他嵌入式项目。下图用于说明问题。

因此，如果您看到当我将头像徽标更高时，它将放下导航链接。

我希望我的头像图片不影响其旁边的链接。

这是我的CSS和HTML：

   .terms-link {
        display: inline-flex;
        align-items: center;
        margin-right: -9px;
    }
    
    .user {
        width: 153px;
    }
    
    .terms {
        width: 103px;
    }
    
    .dropdown {
        position: absolute;
        right: 0;
        padding: 30px 50px 30px 0;
        background-color: #336F9C;
        margin-top: 17px;
        z-index: 10;
    }
    
    .right-side {
        display: flex;
        align-items: center;
    }
    
    .sign-up {
        display: inline;
        color: white;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .sign-up a {
        padding: 5px;
    }
    
    nav a.is-active {
        border-bottom: 3px solid #00aedb;
    }
    
    nav a.is-active.transparent {
        border-bottom: 0;
        color: #00aedb !important;
    }
    
    nav {
        margin-bottom: 0;
    }
    
    nav a {
        padding: 0 1.5rem 17px 1.5rem;
        position: relative;
        color: white;
        text-decoration: none;
        font-size: medium;
    }
    
    .explore-beta span {
        font-size: x-small;
        font-style: italic;
    }
    
    .spacer {
        display: inline;
        font-size: medium;
        padding: 0 1rem 17px 1rem;
        color: white;
    }
    
    .avatar-frame{border: 1.5px solid #c7b89e;}
    .avatar-frame,.avatar-frame img{
        width:30px;
    	height: 30px;
    	-webkit-border-radius: 50%; /* Saf3+, Chrome */
    	border-radius: 50%; /* Opera 10.5, IE 9 */
    	/*-moz-border-radius: 50%;  Disabled for FF1+ */
    }

    <div class="right-side">
    <nav>
        <a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
        <a routerLink="/search" routerLinkActive="is-active">Summary</a>
        <a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
        <a routerLink="/explore" routerLinkActive="is-active">Explore</a>
        <a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
        <a routerLink="/about" routerLinkActive="is-active">About</a>

        <a *ngIf="!auth.authenticated()" class="sign-up">
            <a (click)="auth.login()">Log in</a>
            <div class="spacer">|</div>
            <a (click)="openSignUpDialog()">Sign up</a>
        </a>
        <a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
            <span class="terms-link">
                <div class="avatar-frame">
                    <img [src]="userPicture" />
                </div>
            </span>

            <div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
                <a>Log out</a>
            </div>
        </a>
        
    </nav>
</div>

Answer 1

您可以在 avatar-link 类上使用position：absolute将其从默认文档流中删除，并将其父级（即 nav ）设置为 position：亲戚； 这样可以确保化身的尺寸不会影响其同级。

div{
  border: 1px solid black;
}

nav {
  position: relative;
}
.avatar-link {
  position: absolute;
  border: 1px solid red;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.terms-link {
  display: inline-flex;
  align-items: center;
  margin-right: -9px;
}

.user {
  width: 153px;
}

.terms {
  width: 103px;
}

.dropdown {
  position: absolute;
  right: 0;
  padding: 30px 50px 30px 0;
  background-color: #336F9C;
  margin-top: 17px;
  z-index: 10;
}

.right-side {
  display: flex;
  align-items: center;
}

.sign-up {
  display: inline;
  color: white;
  margin-left: 1rem;
  margin-right: 1rem;
}

.sign-up a {
  padding: 5px;
}

nav a.is-active {
  border-bottom: 3px solid #00aedb;
}

nav a.is-active.transparent {
  border-bottom: 0;
  color: #00aedb !important;
}

nav {
  margin-bottom: 0;
}

nav a {
  padding: 0 1.5rem 17px 1.5rem;
  position: relative;
  color: white;
  text-decoration: none;
  font-size: medium;
}

.explore-beta span {
  font-size: x-small;
  font-style: italic;
}

.spacer {
  display: inline;
  font-size: medium;
  padding: 0 1rem 17px 1rem;
  color: white;
}

.avatar-frame {
  border: 1.5px solid #c7b89e;
}

.avatar-frame,
.avatar-frame img {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  /* Saf3+, Chrome */
  border-radius: 50%;
  /* Opera 10.5, IE 9 */
  /*-moz-border-radius: 50%;  Disabled for FF1+ */
}

<div class="right-side">
  <nav>
    <a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
    <a routerLink="/search" routerLinkActive="is-active">Summary</a>
    <a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
    <a routerLink="/explore" routerLinkActive="is-active">Explore</a>
    <a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
    <a routerLink="/about" routerLinkActive="is-active">About</a>

    <a *ngIf="!auth.authenticated()" class="sign-up">
      <a (click)="auth.login()">Log in</a>
      <div class="spacer">|</div>
      <a (click)="openSignUpDialog()">Sign up</a>
    </a>
    <a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
      <span class="terms-link">
                <div class="avatar-frame">
                    <img [src]="userPicture" />
                </div>
            </span>

      <div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
        <a>Log out</a>
      </div>
    </a>

  </nav>
</div>