Question

这是我的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位于右侧。但所有都是单行。

Answer 1

如果你希望所有元素都像这样并排显示，你可以对所有元素应用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 margin属性调整元素之间的间距：

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

Answer 2

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

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

2 个答案: