>

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

    이것이 당신이 원하는 것입니까?

    와이즈 비즈를 싸서   a 로 태그 그런 다음 h1 를 추가했습니다.  수레를 지우는 클래스.

    clearfix
    
    

    <h1 class="clearfix">
       <a href='index.html' class='float-left' id='header1'> 
       Sandra's Studio </a>
    </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;
    }
    
    

    <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>

  • 이전 android - 장치 정책 관리자가 장치 정책을 검색 할 수 없습니다
  • 다음 unit testing - 스팍 - 시간 초과 후 테스트 통과