提交按钮导致布局问题答案

【问题标题】：Submit button causing layout issues提交按钮导致布局问题
【发布时间】：2009-07-14 20:15:59
【问题描述】：

我有 2 个按钮，一个是图像提交按钮，另一个是标准链接按钮。布局问题是图像提交按钮推动了它下方的另一个按钮。如果我取出表单标签，则 2 个按钮并排保持，这是我希望的样子。

关于如何让我的按钮并排同时保留表单标签（我显然需要）的任何建议？

谢谢

<span class="col3data">

<?php "here goes my standard link button"; ?>

<FORM method="post" target="_blank" action = "http://wwwapps.ups.com/WebTracking/OnlineTool">

<INPUT type="hidden" name="InquiryNumber" value="W<?php echo $history['orders_id'];?>">
<INPUT type="hidden" name="TypeOfInquiryNumber" value="R">
<INPUT type="hidden" name="SenderShipperNumber" value="xxxx">
<INPUT type="hidden" name="IATA" value="CA">
<INPUT type="hidden" name="Lang" value="eng">
<INPUT type="hidden" name="DestinationCountry" value="US">

<?php "here goes my image submit button"; ?>

</FORM>


</span>

我的跨度风格

.form_container .col3data
{
 float: left; 
 width: 37%; 
 border:1px solid #00CC33;

 }

【问题讨论】：

你能发布适用的标记和 CSS 吗？

标签： html css forms input

【解决方案1】：

您将常规链接放在<form> 标记之外是否有原因？您的链接不相邻的原因是<form> 是块级元素。

<FORM method="post" target="_blank" action = "http://wwwapps.ups.com/WebTracking/OnlineTool">

<INPUT type="hidden" name="InquiryNumber" value="W<?php echo $history['orders_id'];?>">
<INPUT type="hidden" name="TypeOfInquiryNumber" value="R">
<INPUT type="hidden" name="SenderShipperNumber" value="xxxx">
<INPUT type="hidden" name="IATA" value="CA">
<INPUT type="hidden" name="Lang" value="eng">
<INPUT type="hidden" name="DestinationCountry" value="US">

<?php "here goes my image submit button"; ?>
<?php "here goes my standard link button"; ?>

</FORM>

【讨论】：

【解决方案2】：

也许这也能胜任：

<input type="image" style="float: left;" ... >

【讨论】：

似乎两个按钮都向左浮动使它正确对齐...谢谢！

【解决方案3】：

试试这个：

<div style="float: left;"><input ....>&nbsp;<a href....</div>

【讨论】：