Question

所以我有一个像这样的简单登录提示：

<form id="login">
  <legend>Login</legend>
  <span>
    <input type="text" value="Username">
    <input type="password" value="Password"><br>
    <input type="checkbox">Remember
    <a href="./login/vergeten.html">Forgot?</a>
    <a href="./login/Registreer.html">Register</a>
    <input type="submit" value="Login">
  </span>
</form>

和css：

#login {
  display: inline;
  float: right;
  line-height: 1.5em;
  margin-right: 0.5em;
}

https://jsfiddle.net/tzc6Lpur/

我想要的是底部项目在元素的整个宽度上拉伸，以便登录按钮排列在密码框的右端。像text-align：justify;对文本会这样，但我找不到一个简单的方法来做到这一点。当然，我可以手动定位元素，但这似乎是一个很多冗余的代码。

任何帮助表示赞赏！

Answer 1

简单的方法是相应地更改标记：

<form id="login">
  <legend>Login</legend>
  <div>
    <input type="text" value="Username">
    <input type="password" value="Password"><br>
    <div class="flex-wrap">
        <label for="myCheckbox"><input name="myCheckbox" type="checkbox">Remember</label>
        <a href="./login/vergeten.html">Forgot?</a>
        <a href="./login/Registreer.html">Register</a>
        <input type="submit" value="Login">
    </div>
  </div>
</form>

并使用以下CSS：

.flex-wrap{
   display:  flex; 
  flex-direction: row;   
  justify-content: space-between;
}

#login{
     float:right; //To mantain the form on the right of the screen
  }

所有现代浏览器都支持Flex框，但是如果您需要支持

JSFiddle：https://jsfiddle.net/silviagreen/hcktxgva/3/

Answer 2

你可以在包装元素上使用flexbox，它实际上应该是块级而不是span。

#login {
  display: inline;
  float: right;
  line-height: 1.5em;
  margin-right: 0.5em;
}
#login div {
  display: flex;
  justify-content: space-between;
}

<form id="login">
  <legend>Login</legend>

  <div>
    <input type="text" value="Username">
    <input type="password" value="Password">
  </div>

  <div>

    <input type="checkbox">Remember
    <a href="./login/vergeten.html">Forgot?</a>
    <a href="./login/Registreer.html">Register</a>
    <input type="submit" value="Login">
  </div>
</form>

Answer 3

您可以使用此按钮将按钮对齐到右端。

<input id = "login_button" type="submit" value="Login">

并在css中添加

#login_button{
  float:right;
}

你可以使用twitter-bootstrap-3来帮助你。看一看。

Answer 4

您只需添加一个范围并添加float:right即可。

看看这个。 https://jsfiddle.net/adityap708/sedLvLp2/

<form id="login">
  <legend>Login</legend>
  <span>
    <input type="text" value="Username">
    <input type="password" value="Password"><br>
    <span style="float:right;">
    <input type="checkbox">Remember
    <a href="./login/vergeten.html">Forgot?</a>
    <a href="./login/Registreer.html">Register</a>
    <input type="submit" value="Login">
    </span>
  </span>
</form>

#login {
  display: inline;
  float: right;
  line-height: 1.5em;
  margin-right: 0.5em;
}

为其他元素而不是文本辩护

4 个答案: