Javascript 如何使用css在一行中显示按钮和图像

这是我的JavaScript代码：

$('#needdiv').append('<img src="/images/Connect.png" id="connectimage">' + '</img>'
        + '<input type="button" id="connect" value=connect >' + '</input>'
        + '<img src="/images/Remove.png" id="removeimage" />'
        + '<input type="button" id="remove" value="remove">'+'</input>');

---

如何在一行中显示此图像和按钮？我想在左侧使用

连接图像

，在中间使用

连接按钮

和

删除图像

，在右侧使用

删除按钮

。但是都在一行中。

如果希望所有元素都像那样并排显示，可以对所有元素应用CSS样式，并使用float属性（fiddle:）：

或者，也可以使用display属性（fiddle:）：

您可以使用CSS边距属性调整元素之间的间距：

#needdiv img, #needdiv input {
    float: left;
    margin: 0px 10px;
}

---

尝试将html

与

表格布局一起使用：修复了

，因此您可以准确定义单元格的宽度。提供CSS和html+JSFIDLE。请正确指定您的问题，上传您想要获取的图像？你们所说的“连接左边的图像，连接中间的按钮并移除图像，移除右边的按钮”是什么意思。什么的中间和左边？

  #connectimage      
  {float:left;      
  vertical-align:left;
  }
  #connect
  { text-decoration:none;
  vertical-align:middle;
  }
  #removeimage
  {
  vertical-align:middle;
  }

  #remove
  {
  vertical-align:right;
  }

#needdiv img, #needdiv input {
    float: left;
}

#needdiv img, #needdiv input {
    display: inline;
}

#needdiv img, #needdiv input {
    float: left;
    margin: 0px 10px;
}

First you put one Div element for whole content set width as 100%
and indise div for img tag 50% and Button 50% .It should work


CSS:

#needdiv
{
width:100%;
display:block;
}

 #needdiv img
{
float:left;
}
 #needdiv input
{
float:right;
}