右侧的自举输入插件

-1

我在我的网站上有一个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去我没有进入电子邮件输入字段。由于浮动：正确的事情。我需要做到这点不同。

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

来源

2016-04-22 progNewbie

尝试shift +选项卡，你得到了你的答案：p –

那么你的代码不好。在大屏幕上的密码是第一次，但因为我们将调整密码是秒然后tab-index会改变他们的工作.. –

你想在右侧的插件图标？ –

你需要的是tabindex，但由于你的html不好，并且在bootstrap中你已经使用了你自己的风格，所以tabindex有不同的行为。

我已更新您的fiddle html和css的变化。请检查，并让我知道如果它可以给你..

我已经删除浮动，也删除额外的利润现在造成问题，现在如果你将使用选项卡，那么它将逐一去，也将更好地调整大小。我也改变了HTML，所以在这两种情况下，电子邮件字段将是第一个。

来源

2016-04-22 11:52:53

问题是：我希望它在右侧。 – progNewbie

你想在右侧做什么？ –

整件事。所有输入字段和按钮。 – progNewbie

右侧的自举输入插件

回答

相关问题