Question

我想在radio-play.gif按钮的左边放一些空格。有什么可以添加到此代码来实现这一目标？

谢谢！

// 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);

Answer 1

为img标记设置边距（为此需要display:inline-block;）或添加一个 （没有突破空间）。

边际可能是我的首选方式，例如

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

或

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

Btw。：正确的方法是，通过<td>创建<img>和document.createElement元素，然后将它们附加到dom。（或者使用jquery，它有点简单）

Answer 2

你可以在字面上放置一个空格字符。我会用CSS做。为图像提供一个类class="whatever"，然后在CSS中：

.whatever {
    margin-left: 10px;
}

由于你已经在线内联，你可以在内联css中添加边距。

Answer 3

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\')">';

Answer 4

如果“space”表示在渲染按钮元素左侧可视化渲染空间，则通常使用CSS完成。一个常见的实现是图像标记本身或图像标记的容器具有适当分配空间的CSS类属性。要使CSS执行此操作，请查看填充，边距，绝对与相对定位，left或right属性等内容。

在图像之前添加空间，javascript

4 个答案: