Question

我正在尝试将提交按钮放在输入的右侧，但它只是保持不变？

我不知道问题是什么，它真的开始让我烦恼，有人可以帮我吗？感谢

HTML：

<form id="loginformitem" name="loginformitem" method="post" >
  <span>
 <label for="password">Password</label>
    <input type="password" name="log_password" class="logintext" id="password">
  </span>
  <span>
    <label for="username">Username</label>
    <input type="text" name="log_username" class="logintext"  id="username">
  </span>
  <button type="submit" class="loginbutton" name="login">Login</button>
</form>

CSS：

.logintext {
    margin-top: 4px;
    height: 20px;
    width: 200px;
    margin-left: 8px;
    border: 2px solid rgba(0,0,0,0);
border-radius: 2px;
padding: 2px 2px 3px 2px;
font-size: 13px;
color: #222;
}

form label {
font-size: 13px;
font-weight: bold;
color: #a4c0d7;
}

.loginbutton {
    float: right;
    -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
    box-shadow:inset 0px 1px 0px 0px #bee2f9;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
    background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
    background-color:#63b8ee;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #3866a3;
border-radius: 2px;
    display:inline-block;
    color:#14396a;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:76px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #7cacde;
}
.loginbutton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
    background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
    background-color:#468ccf;
}

form span {
  display:inline-block;
  margin:0 10px;
  vertical-align:bottom;
  float: right;
  margin-top:-30px;
}
span input {
 display:block;/* if you want submit under , do form input {} to include it too */
}

Answer 1

.logintext {
    margin-top: 12px;
    height: 20px;
    width: 200px;
    margin-left: 8px;
    border: 2px solid rgba(0,0,0,0);
border-radius: 2px;
padding: 2px 2px 3px 2px;
font-size: 13px;
color: #222;
  background-color: #cdcdcd;
}

form label {
font-size: 13px;
font-weight: bold;
color: #a4c0d7;
}

.loginbutton {
    float: left;
    -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
    box-shadow:inset 0px 1px 0px 0px #bee2f9;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
    background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
    background-color:#63b8ee;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #3866a3;
border-radius: 2px;
    display:inline-block;
    color:#14396a;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:76px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #7cacde;
}
.loginbutton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
    background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
    background-color:#468ccf;
}

form span {
  display:inline-block;
  margin:0 10px;
  vertical-align:bottom;
  margin-top:-30px;
}
span input {
 display:block;/* if you want submit under , do form input {} to include it too */

Answer 2

只需在此处移除浮球：

form span {
    display: inline-block;
    margin: 0 10px;
    vertical-align: bottom;
    /* float: right; */
    margin-top: -30px;
 }

重置你的边距和填充，使一切排好。

如果您正在考虑将整个表单浮动，那么您必须在更大的范围内进行，例如：

#loginformitem {
     width: 565px;
     float: right;
}

这是WORKING DEMO

按钮右侧输入

2 个答案: