navbar heading doesnt stay in place

내 navbar의 왼편에 제목 (navbar에 다른 텍스트보다 큰 글꼴)을 넣고 싶습니다. 지금까지 왼쪽에 가져 왔지만 텍스트가 있습니다. 하프 컷은 텍스트의 절반이 네비게이션 바깥에 있고 그 절반이 텍스트 안에 있습니다. 텍스트를 내비게이션 막대 안에 완전히 넣을 수 있습니까?navbar heading doesnt stay in place

CSS

<style> 

#navbar ul { 
    margin:0 auto; 
    padding: 10px; 
    list-style-type: none; 
    text-align: center; 
    background:#1c1c1c; 
    } 

#navbar ul li { 
    display: inline; 
    } 

#navbar ul li a { 
    font-family: calibri; 
    font-size: large; 
    text-decoration: underline; 
    font-weight: 200; 
    border: 0.5px solid #242424; 
    border-radius: 2px; 
    padding:.3em 1em; 
    color: #ffffff; 
    background-color:transparent; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #ffffff; 
    border-radius: 5px; 
    color:#1c1c1c; 
    } 

#navbar { 
    position: fixed; 
    margin-top: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index:0; 
} 
#navbar { 
    overflow: hidden; 
} 
#navbar h1 { 
    float: left; 
} 

</style>

HTML

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <title>ClickonDeal.com.au-Electronics</title> 
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
     </head> 

<div id="navbar"> 
     <h1>Click</h1> 
     <ul> 
     <li><a href="#">Stuff</a></li> 
     <li><a href="#">more stuff</a></li> 
     <li><a href="#">stuff</a></li> 
     <li><a href="#">stuff</a></li> 
     <li><a href="#">stuff</a></li> 
    </form> 
     </ul> 
    </div> 
    </div> 

    </html>

출처

2013-07-19 RohanPatel

당신은 잘못된 닫는 t의 몇 가지있다 오류를 던지고있는 Ag는 문제가되는 원인이 아닙니다.

대부분의 브라우저에서 H1이 기본 여백을 가지고 있기 때문에 H1이 튕겨 나오기 쉽습니다.

내가 ( http://necolas.github.io/normalize.css/에서 시작)하지만 말은 시간에, 당신은 당신의 H1에 0으로 여백을 설정하여이 문제를 해결할 수있는 CSS를 재설정을 추가 조사 할 것

: 여기

#navbar h1 { 
    float: left; 
    margin: 0; 
}

간단한 jsfiddle은 변화를 나타낸 것 : http://jsfiddle.net/adnrw/BjCBf/1/ (h1 색이 흰색으로 바뀌어서 볼 수 있습니다.)

출처

2013-07-19 03:56:25 adnrw

코드에 CSS 아래를 추가

#navbar h1 { 
    float: left; 
    margin:0; 
}

확인이 JSFiddle

출처

2013-07-19 03:56:05 Praveen

고마워요! 그래서 바보 야/ – RohanPatel

@RohanPatel 일반적으로 :) 각 브라우저마다 자체 설정이 있으므로 항상 HTML을 재설정하십시오. – Praveen

navbar heading doesnt stay in place

답변

관련 문제