Question

我正试图将我的2个表格浮动到彼此旁边。现在在结果中他将这两者放在彼此之下。

这是我的代码：

<id ='AvailabilityFormAM'><form action='availability.jsp' name='availForm_AM'  method='post'>

<table class='TableBorder'><tr class='TableHeading'><td colspan='2'>New activity AM</td></tr>
<tr class='TableData2'><td align='left'>Description:</td>
<td align='left'><input style='width:150px' type='text' name='description' value='Informatica' /></td></tr>

<tr class='TableData2'><td colspan='2'>
<input class='SolidButton' type='button' value='Delete' onclick='javascript:deleteSLine("AM");'/></td></tr></table></form></div>





<id ='AvailabilityFormPM'><form action='availability.jsp' name='availForm_PM' method='post'>

<table class='TableBorder'><tr class='TableHeading'><td colspan='2'>New activity PM</td></tr>
<tr class='TableData2'><td align='left'>Description:</td>
<td align='left'><input style='width:150px' type='text' name='description' value='Inbev' /></td></tr>

<tr class='TableData2'><td colspan='2'>
<input class='SolidButton' type='button' value='Update' onclick='javascript:updateSLine("PM");'/></td></tr></table></form></div>

CSS：

#AvailabilityFormAM {
float: left;
width:200px;
}


#AvailabilityFormPM {
float: left; 
margin-left:200px;
}

Answer 1

您的元素名称中包含错误：

<id ='AvailabilityFormAM'>

没有元素'id'，它可能只是你的属性在那里有点。

我的猜测是你正在寻找一个像这样的分隔符：

<div id ='AvailabilityFormAM'>

和

我个人将第二个CSS规则更改为：

#AvailabilityFormAM, #AvailabilityFormPM {
float: left; 
width: 200px;
}

Answer 2

您使用的ID错误，您的表单的html应如下所示：

<form id ='AvailabilityFormAM' action='availability.jsp' name='availForm_AM'  method='post'>

和此：

<form id ='AvailabilityFormPM' action='availability.jsp' name='availForm_PM' method='post'>

不确定你是否需要这么大的保证金。

浮动表格彼此相邻

2 个答案: