머리글의 오른쪽 상단에 사이트 제목과 태그 줄을 배치하는 방법은 무엇입니까?

Question

저는 Wordpress와 그 twentythirteen 테마를 사용하고 있습니다. 이 주제를 통해 사이트 제목과 태그 라인 텍스트를 머리글의 오른쪽 상단에 배치하고 정렬하고 싶습니다. 그렇게하려고 할 때 어떤 이유로 든 내 로고 아래에 항상 위치합니다. 나는 운이없는 위치 CSS 속성을 가지고 놀았지만 여전히 로고 밑에 위치합니다.

CSS 파일

.site-title { 
    font-size: 30px; 
    line-height: 0.5; 
    padding: 5px 0 10px; 
    text-align:right; 
    position: relative; 
} 

.site-description { 
    font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif; 
    text-align:right; 
} 

.site-header { 
    margin:10px auto 0 auto; 
    max-width:980px; 
    padding:0; 
    background-color:#ffffff; 
    background-size: 980px auto; 
    border-top:2px solid #efefef; 
    border-bottom:1px solid #cdcdcd; 
    box-shadow: 0 3px 3px #dedede; 
    -moz-box-shadow: 0 3px 3px #dedede; 
    -webkit-box-shadow: 0 3px 3px #dedede; 
    -o-box-shadow: 0 3px 3px #dedede; 
} 

.site-header .site-title:hover { 
    text-decoration: none; 
} 

.site-header .home-link { 
    min-height: 50px; 
} 

.header-logo { 
    max-width:60%; 
    display:block; 
    padding-top:3px; 
    position:relative; 
} 

여기 내 테스트 웹 사이트는 당신이 내가 무슨 말을 정확하게 볼 수 있도록이다 샘플 : mywptestsite.is-great.org

내가 여기서 무엇을 놓치고? 사전에 감사합니다, 김

Answer 1

문제는 당신이 H1 태그에 사이트 제목을 캡슐화하는, 그래서 새로운 라인에 위치된다는 점이다.

는 동일한 <div> 요소에 귀하의 로고와 사이트 제목을 모두 바꾸어 문제를 해결하고, 사이트 제목 클래스 헤더 로고 클래스 float: left; 및 float: right;을 추가 할 수 있습니다.

Answer 2

당신이 시도 할 수 있습니다 - 제목과 태그 라인 CSS 클래스에 다음 몇 줄을 추가

.site-title { 
    position:absolute; 
    top:20px; 
    right:20px; 

     } 
.site-description { 
position:absolute; 
top:50px; 
right:110px; 
} 

당신은 물론 원하는 위치를 얻기 위해 상단과 오른쪽 값을 변경할 수 있습니다 ...

Answer 3

이미지, 제목 및 설명에 float을 사용하면 두 요소를 오른쪽으로 가져올 수 있습니다. 요소가 모든 떠 다니는 요소를 둘러 쌀 수있게하려면 .home-link에 clearfix technique을 사용해야합니다.

CSS

.header-logo { float: left; } 
.site-title{ float: right; clear: none; } 
.site-description { clear: right; }