如何在input框中嵌入一个跳转链接

若想实现如下图所示的效果：

直接上代码:
样式代码1：

<style>
    .container{
        position: relative;
        width: 97%;
        background-color: #f1f1f1;
    }
    .container input{
        width: 100%;
        height: 18px;//位置设置，可根据自己的需求修改
    }
    .container a{
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: #fff;
        border: none;   // 去掉边框
        outline: none;  // 去掉点击按钮后的边框
     }
</style>

样式代码2：

<script type="text/javascript">
		function redict() {
			document.form1.submit();
		}
</script>

JSP页面中用到这项功能的关键代码：

<form name="form1" action="/ApproDetailQueryServlet" method="post">
	<table style="width: 100%;height: 100%">
       	 <c:forEach var="U" items="${leaderawardscore}"  > 
		 <tr>
			<td>所剩分值：</td>
			<td>
				<div class="container">
					<input name="remain_score" value="${U.remain_score}">
					<a onclick="redict()"><font color="blue">查看明细</font></a>
				</div>
			</td>
		 </tr>
		</c:forEach>
	</table>
	</form>