My form has two buttons - one for registering and the other for canceling the form. I created them using the following code:
<s:submit name="cancel" key="project.button.cancel" />
<s:submit name="login" key="form.register.registerBtn" />
However, when I view the form, the buttons appear on separate rows instead of in the same row. You can see this in the image below:
How can I fix this issue? Thank you.
Update 2013/9/21 :
Here is the full JSP page code:
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/css/form.css" />
<title>Insert title here</title>
</head>
<body>
<div style="padding-top: 20px;"></div>
<div style="width: 600px; margin: 0 auto;">
<div style="float: left; padding: 20px; padding-top: 0px;">
<img alt=""
src="${pageContext.request.contextPath}/resources/img/register.png">
</div>
<div class="box" style="width: 300px; float: left;" id="col">
<h1>
<span class="title"><s:text name="form.register.title" /></span>
</h1>
<hr />
<form action="login" method="post" namespace="/">
<span class="text"><s:text name="user.nickname" /></span>
<s:textfield name="nickname" />
<hr />
<span class="text"><s:text name="user.username" /></span>
<s:textfield name="username" />
<span class="text"><s:text name="user.password" /></span>
<s:password name="password" />
<span class="text"><s:text name="user.validation" /></span>
<s:password name="validation" />
<s:checkbox name="recoverable" key="user.recoverable" />
<hr />
<span class="text"><s:text name="user.email" /></span>
<s:textfield name="validation" />
<div style="display: inline-block; white-space: no-wrap;">
<s:submit name="cancel" key="project.button.cancel"
cssClass="button-red" />
<s:submit name="login" key="form.register.registerBtn"
cssClass="button-green" />
</div>
</form>
</div>
</div>