2012-09-17 4 views
0

FireFox는 다음과 같이 별도의 줄에 하나 이상의 단어가있는 목록 항목에 단어를 넣는 것 같습니다. http://a.flatsi.es/projects/7temwk/images/j7tjrt
다른 모든 방법에서 이처럼 원하는 방식입니다.
http://a.flatsi.es/projects/7temwk/images/9766khFirefox 표시 목록이 잘못되었습니다

올바른 방향의 포인트가 우수합니다.

HTML

<div class="singlenav"> 
<ul> 
<li><a href="/v2">Home</a></li> 
<li><a href="/v2/?p=17">About</a></li> 
<li><a href="/v2/?p=14">Information</a></li> 
<li><a href="/v2/?p=11">Study Skills</a></li> 
<li><a href="/v2/?p=8">Discuss</a></li> 
<li><a href="/v2/?p=5">Contact</a></li> 
</ul> 
</div> 

CSS

.quicklinks{ 
width: 100%; 
font: bold 20px 'Helvetica',sans-serif; 
color: #333; 
text-align: left; 
margin: 70px 0 0 0; 
display:inline-block; 
} 

.quicklinks li{ 
white-space: nowrap; 
} 


.quicklinks li a{ 
color: #333; 
text-decoration: none; 
padding: 10px; 
margin: -10px; 
} 
+0

사용중인 HTML과 목록에 적용 할 수있는 다른 CSS를 게시 할 수 있습니까? 나는 당신이 올린 것에 근거하여 이것을 보지 않을 것입니다. 관련 메모에서 단어 또는 CSS 공백 규칙 사이에 ' '을 사용하여 손상되지 않도록 할 수 있습니다. – j08691

+0

고마워요 @ j08691   추가 그게 내가 CSS에서 잘못하고있는 게 있는지 궁금해 지금 나를 위해 일했다. 다시 한 번 감사드립니다! – nickoreardon

+0

방금 ​​추가 한 테스트 케이스에 대한 내 대답을 테스트했으며 Fx에서 제대로 작동합니다. 문제는 당신이 기본 동작에 의존하고 있다는 것입니다. 브라우저 기본값을 자비로 다루고 싶지 않다면 제 대답과 같이 명시 적이어야합니다. – Rushyo

답변

1

우리는 내가 '초능력'에 그리기 시도거야 떨어져 갈 수있는 HTML 테스트를하지 않기 때문에.

li { white-space: nowrap; } 

편집 :이 시도 어쩌면 당신은 수동으로 일정 높이 이상없이 이동에 강제로 높이 설정을 추가하는 시도 할 수 있습니다

0

FX는 15 일 테스트 케이스에 대해 작동합니다.

예 :

높이 : 100px;

0

li a의 음수 여백은 a의 내부가 해당 상자보다 커지려고하므로 줄 바꿈 가능한 경우 단어를 감싸는 것을 의미합니다. 평행 한 측면에서 음의 마진을 평생 보지 못했지만 실제로 요소가 줄어들면 아마 잘못되었을 것입니다.

관련 문제