이미지 앞에 공백 추가, javascript

radio-play.gif 버튼의 왼쪽에 약간의 공간을 넣으려고합니다. 이를 달성하기 위해이 코드에 무엇을 추가 할 수 있습니까?이미지 앞에 공백 추가, javascript

감사합니다.

// Last (only one on Mac) row has the VCR buttons. 
// 
s += '<td>'; 
s += '<img border="0" src="/images/dot.gif" width="81" height="' + gPreBtnVertSpace + '"><br>'; 
s += '<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">'; 

if (player != 'MP3') 
    s += '<img alt="STOP" src="' + imageDir + 'radio-stop.gif" width="72" border="0" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'stop\')">'; 

s += '</td></tr>'; 

document.write(s); 

// removing mute button 
var myEl = document.getElementsByName("mute"); 
var elP = myEl[0].parentNode.parentNode; 
elP.removeChild(myEl[0].parentNode);

출처

2012-06-22 flemingworks

DOM의 일반 텍스트 조작과 마찬가지로 (document.write() 일반적으로). 게다가 페이지 레이아웃을위한 JavaScript 생성 HTML 테이블을보고 있습니까? 2012 년 CSS를 사용하면 훨씬 빠르고, 빠르고, 쉽고, 더 건강해질 수 있습니다. – user268396

중 하나가 img 태그에 여백을 설정하거나   (없음 차단 공간)를 추가합니다 (이것에 대한 display:inline-block; 할 필요가있다).

아마도 여백은 내가 선호하는 방법 일 것입니다.

img{ 
    display:inline-block; 
    margin-left:5px; 
}

또는

s += '&nbsp;<img alt="PLAY" ...

는 Btw는 document.createElement를 통해 <td> 및 <img> 요소를 생성 한 후 DOM에 첨부하는 올바른 방법이 될 것 .:. (또는 jquery를 사용하면 더 간단 해집니다.)

출처

2012-06-22 15:21:07 Christoph

문자 그대로 앞자리에 공백 문자를 넣을 수 있습니다. 나는 CSS를 사용하여 그것을 할 것이다. CSS의 이미지를 다음 클래스 class="whatever" 및 보내기

.whatever { 
    margin-left: 10px; 
}

인라인 이미 그 일을하고 있기 때문에, 당신은 단지 인라인 CSS에서 여백을 추가 할 수 있습니다.

출처

2012-06-22 15:21:46 sachleen

은 여백을 적용하기 위해 블록 요소 여야합니다. – Christoph

http://jsfiddle.net/WWh4u/ – sachleen

이미지는 대체 된 요소이기 때문에 특수 처리됩니다. 그러나 규칙은 여전히 인라인 요소가 여백에 적용될 수 없음을 의미합니다. . – Christoph

s += '&nbsp;<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';

OR,보다 정확하게, "공간"시각적으로 렌더링하는 버튼 소자의 좌측 공간을 렌더링 수단 경우

s += '&nbsp;<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; margin-left:5px;" onclick="HandleAction(\'playnow\')">';

출처

2012-06-22 15:22:08 Mike

,이 CSS는 통상적으로 수행된다. 일반적인 구현은 이미지 태그 자체 또는 이미지 태그의 컨테이너에 공간을 적절히 할당하는 CSS 클래스 속성이 있다는 것입니다. CSS에서이를 수행하려면 패딩, 여백, 절대 위치와 상대 위치, left 또는 right 속성 등을 조사하십시오.

출처

2012-06-22 15:23:32 taz

이미지 앞에 공백 추가, javascript

답변

관련 문제