Question

我正在尝试将提交按钮浮动到表单中的右侧，但我遇到问题浮动没有应用于提交按钮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>

Answer 1

试试这个。我将一个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>

“浮动：右”未应用于提交按钮

1 个答案: