레이블, 입력 - 공유 공간 (클래스/div)

Question

나는 아주 간단한 일이있어,하지만 그 방법을 찾을 수 없습니다.

내가 폼을 가지고 있다고 가정 해 봅시다. 입력을 다른 것 아래에 추가하고 싶지만 그 옆에 레이블이 있습니다 (그 중 하나만 옆에 있음).

모든 클래스는 크기가 같기 때문에 (응답 성을 높이기 위해) 만들고 싶습니다. 그러나 레이블 옆에 레이블이있는 입력을 만들어 레이블과 공백을 공유하므로 사용자가 작은 화면에서 다른 레이블을 열면 서로가 옆에 놓이게됩니다.

나는 당신이 무슨 뜻인지 알기를 바랍니다. : P

고마워요!

편집

<div class="mainbox-form"> 
    <form> 
     <div class="mainbox-input"> 
      <input type="text" name="store-name" placeholder="Name"><br> 
     </div> 

     <div class="mainbox-input"> 
      <input type="text" name="store-subdomain" placeholder="Subdomain"> 
      <label name="store-subdomain">.label.here</label><br> 
     </div> 

     <div class="mainbox-input"> 
      <input type="email" name="store-email" placeholder="Email"><br> 
     </div> 

     <div class="mainbox-input"> 
      <input type="password" name="store-password" placeholder="Password"><br> 
     </div> 

    </form> 
</div> 


.mainbox-form 
{ 
    text-align: center; 
    max-width: 50%; 
    min-width: 350px; 
    margin: 0 auto 0 auto; 
} 

.mainbox-input label 
{ 
    font-weight: bold; 
    color: #606060; 
} 

.mainbox-input 
{ 
    max-height: 57px; 
} 

.mainbox-input input 
{ 
    background: #f3f3f3; 
    width: 80%; 
    border: none; 
    color: #606060; 
    margin: 3px auto 3px auto; 
    padding: 15px 40px; 
    font-size: 18px; 
} 


.mainbox-input input[name=store-subdomain] 
{ 
    max-width: 59%; 
} 

.mainbox-input input:focus 
{ 
    outline: none; 
} 

.mainbox-input input:active 
{ 
    outline: none; 
} 

http://jsfiddle.net/twjw113w/

는 여기에 내가 지금 같이있어 코드입니다. 내가 가진 문제는 레이블이 지정된 입력이 왼쪽으로 고정되어 있지 않고 다르게 작동한다는 것입니다. 내가 너보다 더 잘 볼 수있을거야. 내가 설명 할 수있는 것보다.

Answer 1

같은 줄에 원하는 라벨과 입력 요소에 인라인 블록과 너비를 추가해야합니다.

.mainbox-input label 
{ 
    font-weight: bold; 
    color: #606060; 
    display:inline-block; 
    width:35%; 
} 
.mainbox-input input[name=store-subdomain] 
{ 
    max-width: 40%; 
    display:inline-block; 
} 

원하는 방식인가요? jsfiddle

Answer 2

아래의 CSS 속성을 제거하십시오 :

.mainbox-input input[name=store-subdomain]{ 
    max-width:100%; 
} 
.mainbox-input input{ 
    width:auto; 
    display:table 
} 
.mainbox-input label{ 
    display: table; 
    padding: 0px 40px; 
} 

방문이 URL :

.mainbox-input{ 
    max-height: 57px; 
} 

아래의 CSS를 수정은 비록 ** http://jsfiddle.net/sarowerj/e41653o4/