홈>
H2는 H1 아래로 가지 않습니다.
클라이언트를위한 웹 사이트를 만들고 있는데 왼쪽에있는 아이콘, 아이콘 오른쪽에있는 H1, H1 아래에있는 H2와 같은 정렬을 가진 탐색 모음을 갖고 싶습니다. 처음 두 부분을 완료했지만 H2가 H1 아래로 이동하지 않습니다. 누구든지 이것을 알아낼 수 있습니까?
#header-nav {
width: 100%;
background-color: #3985BA;
border-radius: 0;
border: 0;
}
#logo {
background: url('../images/piano.png') no-repeat;
width: 200px;
height: 200px;
}
.navbar-brand {
padding-top: 25px;
text-align: center;
}
.navbar-brand h1 {
text-transform: uppercase;
font-family: bebas-neue, sans-serif;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand span {
text-transform: uppercase;
color: #A7D8DC;
margin-top: 15px;
font-weight: 600;
}
.navbar-brand a:hover,.navbar-brand a:focus {
color: #04292C;
text-decoration: none;
}
#header1 {
color: #04292C;
}
<header>
<nav id='header-nav' class='navbar navbar-default'>
<div class='container'>
<div class='navbar-header'>
<a href="index.html" class='float-left'>
<div class='d-none d-sm-none d-md-none d-lg-block d-xl-block' id='logo' alt='piano logo'></div>
</a>
<div class='navbar-brand'>
<a href='index.html' class='float-left' id='header1'><h1>Sandra's Studio</h1></a>
<p>
<span id='header2'>Cumming, GA</span>
</p>
</div>
</div>
</div>
</nav>
</header>
- 답변 # 1
관련 자료
- rust - 루프 내에서 구조체 하나만 이동하는 방법
- python 3.x - 정수 키로 TypedDict를 만드는 방법은 무엇입니까?
- javascript - 삼항 연산자로 IF를 수행하는 방법
- javascript - localstorage의 데이터로 저장소를 초기화하는 방법은 무엇입니까?
- c++ - std - : initializer_list 로 생성자를 만드는 방법
- r - 최대 이상 치가있는 날을 찾는 방법
- swift - xmlcoder로 xml을 디코딩하는 방법은 무엇입니까?
- css - HTML 단락의 맨 아래 만 채우는 방법은 무엇입니까?
- .net core - hibernatecfg를 appsettingsjson으로 옮기는 방법
- java - 문자열에서 일부 문자 만 표시하는 방법
- wpf - 숫자 만있는 C # 텍스트 상자
- node.js - FFMPEG 및 노드에서 스트림을 사용하는 방법
- next.js - NextJS에서 Linaria를 어떻게 사용할 수 있습니까?
- reactjs - react-places-autocomplete로 우편 번호를 얻는 방법
- mysql - LEFT JOIN으로 WHERE 조건을 사용하는 방법은 무엇입니까?
- reactjs - authcontext ()에서 jest/RTL로 테스트를 실행하는 방법
- swift - JSON 데이터 swiftUI에서`self` 변수를 다루는 방법
- css - 모든 html 구성 요소를 페이지 중앙으로 이동하려면 어떻게해야합니까?
- python - Discordpy로 메시지를 보내는 방법
- c# - Unity에서 게임 프리 팹을 이동하는 방법
관련 질문
- javascript : 스크롤시 텍스트 표시 /사라짐
- html : CSS : 페이지에서 약간 떨어진 곳에 패널을 배치하는 방법
- html : RSS Feed를 사용하여 팟 캐스트 용 플레이어를 생성하려면 어떻게합니까?
- html : 부트 스트랩이 내 아이콘을 텍스트와 다른 줄에 배치하는 이유는 무엇입니까?
- javascript : if 조건에 따라 이벤트 색상을 변경해야합니다.
- html : 부트 스트랩 사용자 정의 파일 입력 클래스 배경색을 변경하는 방법
- html : 탐색 모음의 아이콘 하단에 텍스트를 표시하려면 어떻게해야합니까?
- html : 모바일 메뉴 문제
- html : 아이콘, 텍스트를 다르게 만들고 싶습니다.
- javascript : 부트 스트랩 4, HTML 및 CSS로 웹 사이트 복제
이것이 당신이 원하는 것입니까?
와이즈 비즈를 싸서
a
로 태그 그런 다음h1
를 추가했습니다. 수레를 지우는 클래스.<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <header> <nav id='header-nav' class='navbar navbar-default'> <div class='container'> <div class='navbar-header'> <a href="index.html" class='float-left'> <div class='d-none d-sm-none d-md-none d-lg-block d-xl-block' id='logo' alt='piano logo'></div> </a> <div class='navbar-brand '> <h1 class="clearfix"><a href='index.html' class='float-left' id='header1'> Sandra's Studio </a></h1> <p class="text-left"> <span id='header2'>Cumming, GA</span> </p> </div> </div> </div> </nav> </header>