右側のブートストラップ入力アドオン

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は異なる動作をします。

fiddleをhtmlとcssの変更で更新しました。私があなたのためにOKなら、私に知らせてください。

私はフロートを取り除き、余分な余白も取り除きました。これは今タブを使用すると問題を引き起こしていました。 。私もhtmlを変更したので、両方の場合で電子メールフィールドが最初になります。