인접한 두 개의 텍스트 상자 위치하기

Question

웹 페이지가 있는데 로그인 섹션을 설정하려고합니다 : 두 개의 양식 입력란을 옆에두고 (전자 메일 및 로그인 정보 용) 노력하고 있습니다. 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} 

또는 하나 개의 사업부로 두 입력을 작성하거나 사용 폭에 대한

Answer 2

확실하지 부동 언급하지만, float: left 작동합니다 ...

.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; 
}