How to align two form submits
I have a page with two submit buttons at the bottom of the page. One for the submit of the page that posts to an action and another to cancel that posts to a different action. For whatever reason IE has a problem with placing these two buttons side by side. Firefox has no issue.
Here is my script:
<div class="button_row">
using (Html.BeginForm("Edit", "Design"))
{ %>
<div class="button_cell_left">
<input type="submit" value="Update" />
</div>
<% } %>
<% Html.EndForm(); %>
using (Html.BeginForm("Review", "Design"))
{ %>
<div class="button_cell_right">
<input type="submit" value="Cance开发者_StackOverflowl"/>
</div>
<% } %>
<% Html.EndForm(); %>
Here is the css for those classes:
.button_row { float:left; width: 100%; }
.button_cell_left {float:left; width: 20%; }
.button_cell_right {float:left; width: 20%; }
The 20% width is plenty room wise for those buttons. Like i said in ie they won't stay on the same line but in firefox they will. My question is why given my code?
Thanks in advance, Billy
You need to float the forms they're wrapped in as well, IE doesn't implement float properly, so if you want 2 floats on the same line, they must both be floated. This issue was annoying me yesterday as well
New CSS:
.button_row { float:left; width: 100%; }
.button_row form {float:left; width: 20%; }
Set a width in pixels, not %. IE have problems with % at times.
Your first input is missing it's self-closing slash.
精彩评论