탐색 모음과 h1 정렬

서버 측 개발자가 여기에 자신을 어떤 스타일링을 가르치려고합니다.탐색 모음과 h1 정렬

this site에서 헤더 섹션 (id=topbar)을 복제하려고했습니다. 내 초기 노력은 h1 (scott hanselman)을 탐색 목록 항목 (about, blog etc)과 맞추지 못했습니다. - 대부분 float: left 및 display: inline을 사용하여 블록을 극복하기 위해 시도했습니다. h1 - 실패했습니다!

크롬 개발 도구에서 CSS를 사용하여 연주 할 때, 나는 그가 containerInner에 멋지게 그 항목을 정렬 한 방법을 이해하지 못했습니다. 나는 내가 상속받은 margin 속성 (CSS의 4-9 행)을 토글 할 때 탐색 항목이 h1 아래로 떨어지는 것을 발견했습니다. 이는 블록 요소로 기대할 수 있습니다.

제 질문은 h1이 가로 공간을 모두 차지하지 않는다는 것입니다. 내 생각 엔 float과 display 속성이 표시되지 않았습니다. 여기

는 지금까지 내 노력 : HTML

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>first last</title> 
    <link rel="stylesheet" href="blog_style.css" type="text/css" /> 
</head> 

<body> 
    <div class="container"> 
     <div class="top-ribbon-outer"> 
      <div class="top-ribbon-inner"> 
       <h1>first last</h1> 
       <nav> 
        <ul> 
         <li>item1</li> 
         <li>item2</li> 
         <li>item3</li> 
         <li>item4</li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

CSS :

body { 
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    margin-left: 50px; 
} 

.top-ribbon-outer { 
    width: 100%; 
    height: 50px; 
    color: white; 
    background-color: black; 
    position: relative; 
} 

.top-ribbon-inner { 
    height: 20px; 
} 

h1 { 
    margin-bottom: 0px; 
    margin-top: 0px; 
    float: left; 
    /*display: inline;*/ 
} 

li { 
    float: left; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

ul { 
    list-style-type: none; 
}

출처

2013-07-20 markdsievers

를 시도? –

@NikolaR. 아니요, 단지 현지에서 개발하고 있습니다. html을 파일로 저장하고 css를'blog_style.css' 파일로 같은 디렉토리에 저장하면됩니다. – markdsievers

내 대답이 업데이트되었습니다. CSS를 사용하면 font-size로 재생할 수 있습니다. –

당신은 ul 및 h1 헤더 display:inline-block를 사용해야합니다. 그래서 당신이 어딘가에 살고있는 마이

h1 { 
    margin-left: 10px; 
    margin-top: 10px; 
    float: left; 
    display: inline-block; 
} 

ul { 
    list-style-type: none; 
    display:inline-block; 
    float:right; 
}

JsFiddle

출처

2013-07-20 09:54:29 Sachin

안녕하세요, 솔루션 주셔서 감사합니다. 참조 사이트에서 어떻게 달성되었는지 확인할 수 있었습니까? 내 이해에 틈을 메우고 싶습니다. – markdsievers

참조 사이트에서 @marksievers를 사용하는 사람들은 왼쪽의 float'h1'과 리그의'nav'와 같은 개념을 사용하고'dispaly : block'을 사용했습니다. – Sachin

감사합니다! – markdsievers

부모의 높이를 설정할 필요가 없습니다. 그냥 overflow: hidden를 사용하고는 올바르게 자녀에게

CSS를 떠 다룰 것입니다 :

body { 
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    margin-left: 50px; 
} 

.top-ribbon-outer { 
    width: 100%; 
    color: white; 
    background-color: black; 
    position: relative; 
} 

.top-ribbon-inner { 
    overflow: hidden; 
} 

h1 { 
    margin: 0; 
    float: left; 
    padding: 5px; 
} 
nav { 
float: right; 
} 

li { 
    float: left; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

ul { 
    list-style-type: none; 
}

Demo

출처

2013-07-20 09:54:06

탐색 모음과 h1 정렬

답변

관련 문제