0

我正在尝试将提交按钮浮动到表单的右侧，但我面临的问题是浮动未应用于提交按钮Login。我添加了一些服务器端生成的代码。

代码

   <!DOCTYPE html>

<head>
<style type="text/css">

  #login-form{
    width: 400px;
    background-color: #6B0000;
    color: white;

  }

  #loginButton{
    color: #6B0000;
    border: 1px solid;
    padding: 5px 30px 5px 30px;
    background-color: white;
    border-radius: 3px;
    /*This one here does not work */
    float: right;   
}   


</style>

</head>
<body>
    <header id="header">
        <h1>
               Google Maps &amp; Yahoo Mashup

        </h1>
    </header>

    <DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<td><input type="submit"  value="Login"  id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0"  />
</form>
    </DIV>

</body>
</html>
4

1 回答 1

0

试试这个。我为输入按钮设置了 2 的 colspan 并为其父 td 设置了 100% 的宽度，这与浮动右侧一起应将其向右移动。

#login-form{
    width: 400px;
    background-color: #6B0000;
    color: white;

  }

  #loginButton{
    color: #6B0000;
    border: 1px solid;
    padding: 5px 30px 5px 30px;
    background-color: white;
    border-radius: 3px;
    /*This one here does not work */
    float: right;   
}   

  /* Make the input's parent td 100%, you may want
     a class here instead for browser support */
  td:last-child {
    width: 100%;
}
<body>
    <header id="header">
        <h1>
               Google Maps &amp; Yahoo Mashup

        </h1>
    </header>

    <DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<!-- setting a colspan of two -->
<td colspan="2"><input type="submit"  value="Login"  id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0"  />
</form>
    </DIV>

</body>

于 2016-07-16T11:11:31.917 回答