Question

我的网站上有一个header-div。在标题内，我希望在右侧有一个登录表单。

的CSS：

#header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45px;
    padding: 5;
    background: #fff;
    border-bottom: 1pt solid #ccc;
    text-align: right;
    font-weight: bold;
}

#header div {
    /*display: inline-block;*/
    cursor: pointer;
    /*padding: 4px;*/
    float: right;
    text-decoration: none;
    font-size: 15px;
    margin-right: 5px;
}

#submitButton {
  float:right;
}

HTML：

<div id="header">
<div id="login">
  <form class="form-inline" role="form">
<div class="row">
    <button type="submit" class="btn btn-default" id="submitButton">Login</button>
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>

            <input type="email" class="form-control" placeholder="Enter email" />
        </div>
    </div>
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>

            <input type="password" class="form-control" placeholder="password" />
        </div>
    </div>
</div>
</form>
</div>
</div>

到目前为止我所拥有的： http://jsfiddle.net/n5qmc/254/

但如果我输入密码表格并按TAB键，我就不会进入电子邮件输入栏。因为浮动：正确的事情。我需要以某种方式做到这一点。

这样做的正确方法是什么？谢谢！

Answer 1

你需要的是tabindex，但由于你的html不好而且在引导程序中你使用了自己的风格，因此tabindex有不同的行为。

我已根据html和css的更改更新了您的fiddle。如果可以，请检查并告诉我..

我已经删除了浮动并且还删除了额外的边距，如果您将使用Tab，那么现在会导致问题，然后它将逐个进行，并且在调整大小时也会更好。我也改变了html，所以在这两种情况下，电子邮件字段都是第一位的。

右侧的Bootstrap输入插件

1 个答案: