css 문의드립니다...ㅜㅜ 채택완료
구현하려고하는것은 메뉴와 메뉴사이에 작은 선을 넣으려고 하는데 안되네요...
border-right 로 넣으면 위아래 선이 너무 꽉차서 안이뻐서
after { content: ""; width: 5px; height: 16px;..........이걸 이용해서 넣으려고하는데
메뉴와 메뉴사이에 안들어가고 저렇게 글씨 옆에만 붙어버리네요..
이런저런 방법을 다 시도하고 있는데 안되서 문의드립니다..ㅜㅜ
http://sir.kr/data/editor/2503/974992987_1742292034.428.jpg" width="100%" />
소스---------------------
" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'>
STICKY SLIDER NAV
Sliding content with sticky tab nav
답변 3개
메뉴 간 작은 선을 넣으려 할 때,
현재 방식(::after)으로는 각 메뉴 항목의 뒤쪽에만 선이 붙기 때문에
정확한 가운데 정렬이 어려우니 각 메뉴 항목을 감싸는 컨테이너에
display: flex;, align-items: center;, justify-content: center;를 설정한 후,
각 메뉴 항목(.et-hero-tab)에 좌우 padding을 추가하여 충분한 공간을 확보한 다음,
각 항목의 오른쪽에만 가상 요소(::after)를 두어 선을 삽입하면
메뉴 간 구분선이 정확히 중앙에 배치되지 않나 싶습니다.
.et-hero-tab { position: relative; /* 메뉴 항목의 상대적 위치 기준점 설정 */ }
.et-hero-tab::after { content: ""; position: absolute; top: 50%; /* 메뉴 항목 높이의 중간 지점에 배치 */ right: 0; /* 메뉴 항목의 우측 끝에 배치 */ transform: translateY(-50%); /* 세로 중앙 정렬 */ width: 1px; /* 구분선 두께 */ height: 16px; /* 구분선 높이 */ background-color: #000; /* 구분선 색상 */ opacity: 0.5; /* 구분선 투명도 */ }
/* 마지막 메뉴 뒤의 구분선 제거 */ .et-hero-tab:last-child::after { display: none; }
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
after에
position: absolute;
top: 50%;
transform: translateY(-50%):
그리고 left 또는 right 로 위치 조정
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
많이 배웁니다!!!