Navbar에서 드롭 다운 화살표를 인라인으로 이동

Question

나는 건물에있는 반짝이는 응용 프로그램에 navbar가 있으며 메뉴 아래에있는 대신 드롭 다운 화살표를 인라인으로 이동해야합니다.

는 네비게이션 바 토글 함께 할 수있는 그 무언가인가?

Answer 1

일반적으로 I는 현재 코드로 작업을 수행하는 방법을 보여 것이지만,이 아니기 때문에 어떤 내가 당신을 위해 함께 예를 넣습니다.

절대 위치 지정을 사용하여 부모 클래스 인 nav-item 내에 :after 요소를 배치합니다. 부모 클래스는 절대 위치에있는 자식을 부모 내부에 유지하기 위해 상대 위치 지정이 필요합니다.

top:50%;을 사용하여 아이콘을 부모 컨테이너의 가운데로 가져 오지 만 항상 너무 낮기 때문에 transform:translateY(-50%)을 추가합니다. 그 아이콘의 50 %를 끌어 올리면 죽은 센터로 만들 수 있습니다.

는이 글이 도움이 되었길 바라며 :)

.navbar{ 
 
    display:flex; 
 
    justify-content:flex-start; 
 
    align-items:center; 
 
} 
 

 
.nav-item{ 
 
    flex:1 1 20%; 
 
    position:relative; 
 
    background-color:black; 
 
    padding:1em; 
 
    color:white; 
 
} 
 

 
.nav-item:after{ 
 
    content:'>'; 
 
    font-size:14px; 
 
    position:absolute; 
 
    top:50%; 
 
    right:1em; 
 
    transform:translateY(-50%); 
 
}

<div class="navbar"> 
 
    <div class="nav-item"> 
 
    Item 1 
 
    </div><!-- nav-item --> 
 
    <div class="nav-item"> 
 
    Item 2 
 
    </div><!-- nav-item --> 
 
    <div class="nav-item"> 
 
    Item 3 
 
    </div><!-- nav-item --> 
 
     <div class="nav-item"> 
 
    Item 4 
 
    </div><!-- nav-item --> 
 
</div><!--navbar -->