홈>
이 문제에 대해 많은 질문이 있다는 것을 알고 있습니다. 몇 가지를 시도했지만 그다지 운이 없었습니다.
이 구조가 있습니다 :
HTML :
<header>
<div class="logo">
<a><img style="height: 50px;" src="https://user94.files.wordpress.com/2009/12/ubuntu-logo.png"></a>
</div>
<div class="header-content">
<nav>
<a href="#section-one">About me</a>
<a href="#section-two">Education</a>
<a href="#section-three">Personal life</a>
<a href="#section-four">My work</a>
<a href="#section-five">Contact me</a>
</nav>
</div>
</header>
CSS :
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
align-items: center;
text-align: center;
min-height: 100vh;
width: 100%;
background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}
.header-content {
margin-top: 2em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;;
justify-content: center;
align-items: center;
text-align: center;
}
.logo{
padding-right: 0;
}
nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
font-weight: 400;
color: rgb(49, 41, 61);
font-size: .8em;
margin-top: 2em;
margin-left: 30em;
}
내 탐색 항목에 오른쪽으로 영향을주지 않고 로고를 왼쪽으로 이동하려고하는데, 탐색 항목을 오른쪽으로 가져 오는 데 어려움을 겪고있었습니다. 그들 중 올바르게 배치되었습니다.
어떻게 작동 시키나요?
https://codepen.io/anon/pen/zLMzpO
- 답변 # 1
- 답변 # 2
내 솔루션은 다음과 같습니다.
align-items: baseline;
- 답변 # 3
탐색 모음에서
.logo{ padding-right: 0; opacity: 1; } .logo img{ opacity: 0; } .logo::after{ content: ""; width: 50px; height: 54px; opacity: 0.99; position: absolute; top: 10px; left: 10px; background: url("https://user94.files.wordpress.com/2009/12/ubuntu-logo.png") no-repeat; background-size: 100% 100%; }
를 사용해야합니다 . 유용한 링크 flexbox 기본 탐색-메뉴 항목 및 로고flex-direction: row
body{ margin:0; } header { display: flex; align-items: baseline; justify-content: space-between; min-height: 100vh; background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover; } .header-content { margin-top: 2em; } header a, header a:visited { color: rgb(252, 252, 252); text-decoration: none; padding-bottom: 0.1em; } header a:hover { color: #FA26BF; } .logo{ padding-right: 0; } .logo img{ vertical-align: bottom; } nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; font-weight: 400; color: rgb(49, 41, 61); font-size: .8em; margin-top: 2em; margin-left: 30em; } nav a { margin: 1em; } nav a, nav a:visited { padding-bottom: 0.1em; letter-spacing: 0.1em; text-decoration: none; color: rgb(252, 252, 252); } nav a:hover, nav a:active { color: #FA26BF; }
<header> <div class="logo"> <a><img style="height: 50px;" src="https://user94.files.wordpress.com/2009/12/ubuntu-logo.png"></a> </div> <div class="header-content"> <nav> <a href="#section-one">About me</a> <a href="#section-two">Education</a> <a href="#section-three">Personal life</a> <a href="#section-four">My work</a> <a href="#section-five">Contact me</a> </nav> </div> </header>
관련 자료
- image - SVG 색조 탐색 모음
- html - 텍스트 주위에 탐색 모음 배치
- html - 내비게이션 바가 완전히 덮이지 않음
- swift - 내 탐색 표시 줄 뒤로 버튼을 어떻게 수정합니까?
- vue.js - 탐색 표시 줄이 왜 투명합니까?
- javascript - 드롭 다운 메뉴가있는 탐색 모음을 페이지 상단에 수정하려고합니다
- html - 네비게이션 바 포지셔닝 rtl ltr
- ios - 탐색 모음 스타일
- python - 플라스크에 네비게이션 바 대시
- html - 탐색 모음의 버그
- html - 이 탐색 표시 줄이 왜 이렇게 나타 납니까?
- swift - iOS 13에서 탐색 모음 구분선 숨기기
- css - 포지셔닝 스크롤 바
- android - 사이드 내비게이션 바를 플레이 스토어와 동일하게 만드는 방법
- html - 탐색 모음에서 3 div를 나란히 정렬
- php - 탐색 줄에 이미지가 표시되지 않습니다
- android - 반응 기본 탭 탐색 모음 잘라 내기
- adb를 사용하여 탐색 막대의 크기를 가져옵니다
- android - 메뉴를 클릭했을 때 탐색 표시 줄을 숨기시겠습니까?
- html - 네비게이션 바 지원
관련 질문
- html : 선택 입력을 클릭할 때 배경 이미지가 확대되는 이유
- html : Mkdocs의 일부 페이지에만 CSS 요소 적용
- javascript : 이 code를 더 잘 작성하고 유사하게 만드는 방법은 무엇입니까? 자바스크립트
- html : 내부 테이블의 내용을 중앙으로 가져오기
- javascript : 이미지 위에 여러 색상이 있는 CSS 오버레이
- javascript : CSS가 추가되면 JS 색상 변경이 작동을 멈춥니다.
- javascript : 동일한 이름을 가진 여러 클래스에 액세스하고 변경하고 반복하여 클릭 시 CSS 변경 사항을 추가하는 방법은 무엇입니까?
- html : cfml 페이지에서 css가 있는 가운데 확인란
- javascript : HTML/CSS 슬라이더가 올바르게 반복되지 않음
- html : 팝업 메뉴가 페이지 여백을 엉망으로 만듭니다.
header
를위한이 CSS 원하는 것을해야합니다 :https://codepen.io/anon/pen/YjRQRV
(와이즈 비즈 없음) 방향,
column
그리고justify-content: space-between;
버전의 필수 변경 사항입니다.)