이 버튼과 텍스트가 인라인되지 않게되는 원인은 무엇입니까?

Question

상황 : 애플리케이션 헤더 행에 3 개의 버튼이 있습니다. 같은 포맷 :

<ul> class="menu dropdown clearfix"> 
    <li class="{buttonlabel}"> 
     <a href="#"> 
      <span> </span> 
      <strong>{ButtonLabel}</strong> 
     </a> 
</li> 

<span> CSS는 아이콘 (appx의 20 픽셀의 사각형)을 표시하는 배경 이미지를 가지고있다.

기본적으로 인라인 순서가없는 버튼 목록 항목이 있습니다. 각 목록 항목에는 스팬 (아이콘)과 strong (단추 레이블)이 있습니다.

지금 - 2 명의 컴퓨터/사용자. 같은 OS (Mac). 같은 브라우저 (Chrome). 같은 웹 사이트/URL. 한 사용자가 예상 한대로 표시됩니다. 즉, 모든 목록 항목이 서로 인라인되어 있으며 목록 항목 (단추 및 레이블) 내의 내용도 인라인 단추에 표시됩니다.

다른 사용자는 각 목록 항목 내의 콘텐츠를 블록 (효과적으로)으로 간주합니다. 맨 위 줄에 아이콘이 표시됩니다. 그런 다음 중단 (리터럴 html 중단, 다음 줄) 및 버튼 레이블이 아이콘 아래에 표시됩니다. 그들의 왼쪽 여백이 정렬됩니다.

브라우저의 너비를 좁혀 '버튼'이 어느 정도 더 작은 상태로 부러 졌는지 확인하기 위해 '작업'목록 항목을 재현하려고했습니다.

표시 값은 표시 : 목록 항목 (너비 자동 상속)입니다. <a> 태그는 display : block (너비 자동 상속)입니다. <span>은 디스플레이 : 인라인 블록, 코딩 된 너비 (24px) (너비 자동 또는 상속 된 너비가 아님). <strong>도 표시됩니다. inline-block, width : auto (상속).

더 나쁜 것은 사용자가 틀린 것을보고 정상 월요일, 잘못된 화요일이라고 말한 것입니다.

생각하십니까?

Answer 1

월요일에 백업을로드하고 화요일에 변경 사항을보기 위해 "diff"를 실행하는 것처럼 들립니다. 이전에 작동했기 때문에 변경된 내용을 볼 수 있습니다. 실행 된 플랫폼의 결함이 아닐 수도 있지만 오히려 누군가가 코드를 변경하여 한 브라우저에서이를 해결할 수 있고 다른 브라우저에서는 그렇지 못하게 할 수 있습니다. 인적 오류는 버전 제어가 발명 된 이유입니다.

그래도 작동하지 않는다면 X5ML 및 CSS의 유효성을 검사하여 오류 구문에 문제가 없는지 확인하십시오. 이 유효성 검사기의 목적은 유효하면 코드가 예상대로 표시되는지 확인하지 않으면 브라우저 제조업체의 잘못이며 버그로보고되어야합니다.

http://jigsaw.w3.org/css-validator/

Answer 2

hai i think you initalize the class out of ul tag. so you put the class in inside ul tag. 


<ul class="menu dropdown clearfix"> 
    <li class="{buttonlabel}"> 
     <a href="#"> 
      <span> </span> 
      <strong>{ButtonLabel}</strong> 
     </a> 
    </li> 
</ul>