隣接する2つのテキストボックスの配置

Question

Webページがあり、ログインセクションを設定しようとしています。私は2つのフォーム入力ボックスを隣に（電子メールとログイン情報のために）配置しようとしていますが、 CSSを使用してボックスをカスタマイズします。現在使用しているコードを使用すると、同じ行ではなく、異なる行にボックスが表示されます。

のindex.html：

<div class="loginwrap"> 
    <div class="logincontent_wrap"> 
    <div class="logincontent"> 
    <div class="loginaction"> 
    <form action="/" method="post" class="invite_form" autocomplete="off"> 
     <div class="logininput_row"> 
      <input type="text" class="logininput" value="" name="loginemail" id="loginemail"/> 
      <span class="logininput_overlay">Account email</span> 
     </div> 
     <div class="logininput_row"> 
      <input type="password" class="logininput" value="" name="loginpassword" id="loginpassword"/> 
      <span class="logininput_overlay">Password</span> 
     </div> 

    </form> 
    </div> 
    </div> 
    </div> 
    </div> 

CSSファイル：

.loginwrap { 
    margin: 0 auto; 
    width: 900px; 
} 
.logincontent_wrap { 
    background: none repeat scroll 0 0 #FFFFFF; 
    /*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/ 
    padding: 5px; 
    width: 100%; 
} 
.logincontent { 
    background: none repeat scroll 0 0 #FFFFFF; 
    overflow: hidden; 
    padding: 0px; 
} 

.logincontent .loginaction { 
    float: right; 
    width: 400px; 
} 
.logincontent .loginaction_text { 
    color: #555555; 
    font-size: 14px; 
    font-weight: bold; 
} 
.logincontent .logininput_row { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 4px 0; 
    position: relative; 
    width: 140px; 
} 
.logincontent .loginbutton_row { 
    margin: 8px 0; 
} 
.logincontent .logininput, .logincontent .logininput_overlay { 
    color: #777777; 
    font-size: 12px; 
    font-weight: bold; 
} 
.logincontent .logininput.error { 
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
    border: 1px solid #EE5F5B; 
} 
.logincontent .logininput_overlay { 
    left: 11px; 
    position: absolute; 
    top: 10px; 
    z-index: 0; 
} 
.logincontent .logininput_overlay.focus { 
    color: #CCCCCC; 
} 
.logincontent .logininput { 
    background: none repeat scroll 0 0 transparent; 
    border: 1px solid #BBBBBB; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    line-height: 14px; 
    margin: 0; 
    padding: 9px 9px 8px; 
    position: relative; 
    width: 140px; 
    z-index: 1; 
} 

私はdivのコマンドが別の行を行いますことを知っているが、私はドン」ここ

は、関連するコードです他のコマンドがCSSファイルからのクラス情報を含むように知り、ボックスを隣り合わせに表示させます。ご協力ありがとうございました。

Answer 1

divは、それが独自の行を持つことを意味するブロック要素です。

CSSでの使用

logininput_row{display: inline} 

または1つのdiv、または利用されるように両方の入力を書き込ん幅について確認が、float: leftが動作するはずない浮動

Answer 2

を述べた...

.logininput_row { 
    float:left; 
} 

Answer 3

Mike S.のように、表示をブロックからインラインに変更することができます。別の方法は、要素を浮動させることによって位置を変更することです。

.logincontent .logininput_row { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 4px 0; 
    position: relative; 
    width: 180px; 
    float: left; 
} 

Answer 4

これは、要素を隣り合わせに配置します。ただし、あなたのposition: relativeスタイルとposition: absoluteスタイルは削除されているため、問題が発生している可能性があります。 Account EmailとPasswordをフィールドヒントとして表示する場合は、実行しているよりも良い方法があります。例えば、HTML5's placeholderはまともな代替手段です：あなたが隣同士にしたいん要素

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

.loginwrap { 
    margin: 0 auto; 
    width: 900px; 
} 
.logincontent_wrap { 
    background: none repeat scroll 0 0 #FFFFFF; 
    /*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/ 
    padding: 5px; 
    width: 100%; 
} 
.logincontent { 
    background: none repeat scroll 0 0 #FFFFFF; 
    overflow: hidden; 
    padding: 0px; 
} 

.logincontent .loginaction { 
    float: right; 
    width: 400px; 
} 
.logincontent .loginaction_text { 
    color: #555555; 
    font-size: 14px; 
    font-weight: bold; 
} 
.logincontent .logininput_row { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 4px 0; 
    width: 140px; 
    margin: 8px 0; 
    float: left; 
} 
.logincontent .logininput, .logincontent .logininput_overlay { 
    color: #777777; 
    font-size: 12px; 
    font-weight: bold; 
} 
.logincontent .logininput.error { 
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
    border: 1px solid #EE5F5B; 
} 
.logincontent .logininput_overlay { 
    /*left: 11px; 
    position: absolute; 
    top: 10px; 
    z-index: 0;*/ 
} 
.logincontent .logininput_overlay.focus { 
    color: #CCCCCC; 
} 
.logincontent .logininput { 
    background: none repeat scroll 0 0 transparent; 
    border: 1px solid #BBBBBB; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    line-height: 14px; 
    margin: 0; 
    padding: 9px 9px 8px; 
    width: 140px; 
} 

http://jsfiddle.net/mNmgk/2/

Answer 5

.logininput_row 
{ 
    display:inline-block 
    margin:0 5px; 
    padding:5px; 
} 
.logininput_row input 
{ 
    vertical-align:middle; 
}