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

【问题标题】：how to show button and images in one line using css如何使用css在一行中显示按钮和图像
【发布时间】：2014-07-22 19:54:28
【问题描述】：

这是我的 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>');

在我的 HTML 页面中有：

<div id=needdiv></div>

这是css

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

  #remove
  {
  vertical-align:right;
  }

如何在一行中显示此图像和按钮？我想要左侧的connect image，中间的connect button 和remove image，右侧的remove button。但都在一行中。

【问题讨论】：

尝试使用 html <table> 和 table-layout: fixed，这样您就可以准确地定义单元格的宽度。
提供 CSS 和 HTML + 一个 jsfiddle。
请正确说明您的问题，上传您想要获取的图片？ “连接左侧的图像，连接按钮并删除中间的图像，删除右侧的按钮”是什么意思。中间和左边是什么？

标签： javascript jquery html css

【解决方案1】：

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;
}

【讨论】：

【解决方案2】：

如果您希望所有元素像这样并排显示，您可以对所有元素应用 CSS 样式并使用 float 属性（小提琴：http://jsfiddle.net/G2rRa/）：

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

或者，您也可以使用 display 属性（小提琴：http://jsfiddle.net/G2rRa/1/）：

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

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

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

【讨论】：