CSS HTML 표시 인라인

본 웹 사이트의 새로운 CSS를 작은 문제를 갖는 누군가가 :) 나를 도울 수 있는지 궁금CSS HTML 표시 인라인

내가하지만 순간에, 메뉴 이미지가 서로 옆에 표시하려고 노력하고 있어요 그들은 여전히 서로 아래에 표시됩니다.

이

내가 일부는 사용하지 않는 것을 알고, 그것을위한 CSS를하지만 난 그 순간이 하나에서 튜토리얼을 따라하는 것을 시도하고있다 : http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/

내가 23초 14분 오전 ..

이것은이 내 HTML

<body> 


<div id="page-wrap"> 


<img src="header.jpg" alt="mockup header" /> 


    <ul id="nav"> 
     <li class="articles"><a href="#">Articles</a></li> 
     <li class="videos"><a href="#">Videos</a></li> 
     <li class="downloads"><a href="#">Downloads</a></li> 
    </ul> 

<p>Main Content</p> 


<div id="sidebar"> 
</div>  

</div> 

<div id=footer"> 
</div> 


</body>

T 내 CSS를

* { margin: 0; padding: 0; } 
html { overflow-y: scroll; } 
body { font: 62.5% "Helvetica", sans-serif; 
background: url(body-bg.jpg) top left repeat;} 

ul { list-style: none inside; } 
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; } 
a { outline: none; } 
a img { border: none; } 
/* END RESET */ 


/* TOOLBOX */ 
.floatleft { float: left; } 
.floatright { float: right; } 
.clear { clear: both; } 
/* END TOOLBOX */ 

/* STRUCTURE AND STUFF */ 
#page-wrap { 
width: 654px; 
margin: 0 auto; 
} 

ul#nav { 

} 
ul#nav li{ 
    display: inline; 
    } 
    ul#nav li a { 
     display: block; 
     height: 62px; 
     text-indent:-99999px 

} 
ul#nav li.articles a { 
    width: 200px; 
    background:url(nav-articles.jpg)bottom center no-repeat; 
    } 

ul#nav li.downloads a { 
    width:287px; 
    background:url(nav-downloads.jpg)bottom center no-repeat; 
} 
ul#nav li.videos a { 
    width:167px; 
    background:url(nav-videos.jpg)bottom center no-repeat; 
} 

/* END STRUCTURE */

입니다 어떤 도움을 위해서 다시 행크스 !!

출처

2012-08-02 user1572303

Google/IE 개발자 도구로 방화범을 발 생한 적이 있습니까? F12 키를 누르면 수정하려는 요소에 대해 CSS를 즉시 편집 할 수 있으며 원하는 효과를 얻을 수있는 규칙을 확인할 수 있습니다. – darethas

감사합니다. firebug를 다운로드하고 그걸 가지고 놀기 시작했습니다. :) – user1572303

li에 태그를 설정하면 표시됩니다. 차단하고 있습니다. 에서 블록 : 나는 제거 표시를 건의 할 것

ul#nav li a { 
     display: block; 
     height: 62px; 
     text-indent:-99999px 

}

또는, 부동 소수점을 추가 할 수 있습니다 : 그 선언에 왼쪽 - 내가 당신과 당신이 게시 된 링크의 코드 사이의 차이를 볼 곳이있다.

출처

2012-08-02 19:01:00 Zeth

플로팅 왼쪽으로 찍었습니다 : 표시가 사라져 버렸습니다 : 이전에 생각했던 블록이 이미지를 보여주는 것을 멈추지 만, 그것에 대한 통찰력을 인라인에 넣지는 않습니까? 고마워요. – user1572303

변경 display: inline-black와 (파라미터 nowrap가 포장에서 선을 방지 할 수 있지만 당신이 당신이 무슨 일을하는지에 따라 필요하지 않을 수도 있습니다) 당신은 어떻게 볼 수 ul#nav li a

에 display: block; 제거하십시오

출처

2012-08-02 19:02:42

을 white-space: nowrap; 추가 여기에 영향을 미칩니다. http://jsfiddle.net/aWNbC/

출처

2012-08-02 19:03:00 patsweet

불행하게도 그 이미지를 가져갔습니다. 실제로 인라인으로 배치 했지요. 이유에 대한 통찰력이 있습니까? float : left를 추가했습니다. 그리고 그 일을했지만 여전히 왜 이렇게했는지 궁금합니다. – user1572303

CSS HTML 표시 인라인

답변

관련 문제