Question

在我的网站的联系我们页面中有一个表格。我需要在表单右边的div中显示地址。联系表单是使用页面中的wordpress插件短代码创建的。我在同一页面写了这篇文章：

<div style="float:left;">
  hiii
 </div>

我的表格css是：

width:455px;border-right:1px solid #000;float:left;

但它在form.i下面显示了它，为表单绘制了一个border-right，以便显示一个垂直分区行。什么css代码用于使div到表单的右侧？

Answer 1

<div style="float:left;">
   Your form here
 </div>

<div style="float:right;">
  Address goes here
 </div>

Answer 2

我的建议是不要使用浮动或显示：内联。

而是使用display：inline：block。然后你可以添加大小和边距/填充等。

以下是一个例子：

<style type="text/css">
div {
  display:inline-block;
  width:45%;
  vertical-align:top;
}
form {
  display:inline-block;
  width: 45%;
  vertical-align:top;
}
</style>

<div>this is on the left</div>
<form>
<label>On the Right</label>
<input type="submit" value="test">
</form>

Answer 3

我使用firebug从您的页面获取了这些代码。

<div id="FSContact5" style="width:455px;border-right:1px solid #000;float:left;">
**<div style="clear:both;"></div>**
<div style="display:inline;float:right;"> hiii </div>

你必须删除

的注释div

**<div style="clear:both;"></div>**

在表单标记之后有一个div定义了明确的样式：这就是为什么你的div低于表单的原因。或者你可以设置clear：none。

Answer 4

创建一个外部分区，在里面创建两个分区。将您的联系表格插入一个，将您的信息插入另一个部门。

    <div id="Outer-div">
      <div id="inner-left-div">
        #contact form
      </div>
      <div id="inner-right-div">
        #side content
      </div>
    </div>

添加此CSS

    #inner-left-div { float:left; display:inline-block;}
    #inner-right-div { float:right; display:inline-block;}

这是你编辑过的小提琴 http://jsfiddle.net/2U7RS/

如何在html表单旁边插入一个div

4 个答案: