이 jQuery UI 단추 (브라우저 간)를보다 정확하게 정렬하려면 어떻게해야합니까?

Question

이 페이지에서 http://friendsconnect.org/mainbar.php 버튼을 그림과 브라우저의 양쪽 모두에 동일한 간격으로 정렬하려고합니다.

Chrome을 사용하면 잘 할 수 있지만 다른 브라우저 (IE가 좋음)는 약간만 표시합니다. 물론, 한 브라우저에서 변경하면 다른 브라우저에도 영향을 미칩니다. 여기

는보다 구체적인 코드 : http://pastie.org/private/fpnhyc94ekeezdscko5ihw :

<div style="text-align: right; width: 100%; padding: 0px 0px 0px 0px;"> 
    <table style="height: 35px; float: right;"><tr><td style="vertical-align: middle;"> 
     <div style="text-align: right;"><strong><?php print($user_full_name); ?> (<?php print($user_username); ?>)<br/></strong></div> 
     </td><td style="vertical-align: middle;"> 
     <div style="text-align: right; padding: 0px 5px 0px 5px;float: right;"><img style="float: right; width: 25px; height: 25px" src="<?php print($user_current_propic); ?>&h=25&w=25&zc=1"></div> 
     </td><td style="text-align: middle"><div style="margin-top: 1px;"><button id="options">Settings</button><button id="select">Settings</button></div></td></tr></table> 
    </div> 

그리고 좋은 측정을위한 과정의 pastie

.

Answer 1

구체적으로 귀하의 질문에 대답하려면 :

CSS :

/* Get the whole thing on the right side. */ 
.mainbar { 
    float: right; 
} 
/* Each direct child element should be block, so that <img>s don't have a 
space below them, and things like <span> elements act consistently, etc. The 
line-height will vertically align text. Floating acts similar in most 
modern browsers. */ 
.mainbar > * { 
    display: block; 
    float: left; 
    margin: 5px 10px 5px 0; 
    line-height: 25px; 
} 
/* I did not re-create your button, but it should be CSS-based. */ 
.mainbar-button { 
    height: 25px; 
    width: 100px; 
    border: 1px solid #333; 
} 

HTML :

<div class="mainbar"> 
    <span>Pete Allport (pcallport)</span> 
    <img src="./FriendsConnect My dashboard_files/create_user_image.php" /> 
    <div class="mainbar-button">Settings</div> 
</div> 

그리고 더 jQuery를이 레이아웃의 간격을 포함하지 있습니다; jQuery는 JavaScript 래퍼이며 항상 < 스크립트> </script> 사이에 있습니다.

이 경우 당신은

• 테이블은 테이블 형식의 데이터위한 모범 사례에 관심이, 그리고 심지어는 다음 DL, dt가, 그리고 DD 태그는 더 의미있다. CSS layouts에 대해 학습을 시작해야합니다.

• 인라인 CSS는 가능한 한 많이 피해야합니다. 더 많은 class 및 id 속성을 사용해보십시오.

• < 스크립트> </script>는 DOM 구조가 시각적으로 사용자의 시각적으로 컴파일 될 때까지 (인식 속도가 빠른로드 시간)로드되지 않도록 페이지 맨 아래에 배치해야합니다. 예를 들어, 모든 축약어, 예를 들어,. 색상, 여백 3 자리 16 진수 코드 : 북쪽 남쪽 동쪽 서쪽 값 등

나는 몇 가지 도구를 건의 할 것입니다 경우에 당신이

• 이미이없는 Chrome : 내장 된 검사기를 사용하면 멋지 네요!
• 파이어 폭스 : Firebug
• IE (하나님 께서 금지) : 코딩

해피 라이트 방화범!