레이블을 1 행에 입력하고 다음 줄에 선택 항목을 함께 넣는 데 문제가 있습니다.

Question

이 문제가 발생했습니다. 원할 경우 레이블과 입력을 동일한 줄에 넣거나 필요한 경우 별도의 줄에 쉽게 넣을 수 있습니다. 그러나 지금까지 한 줄에 레이블을 만들고 입력과 선택을 함께 수행하는 것은 쓸데없는 작업이었습니다.

그럼 내가 시도한 것은 ... 레이블을 블록 요소로 만들고 입력을 시도하고 두 개의 인라인 블록을 모두 선택하려고했습니다. 내 2가 내가 시도한 것에 대한 CSS 규칙을 주석 처리 한 것을 볼 수 있습니다. 나는 너비 100 %와 다른 것들로 라벨을 시도했다.

모두 1 줄에 3 개가 모두 있거나 블록 3 개가 모두 있습니다. 나는 레이블이 그들 주위에 싸여 있기 때문에 느낌을 가지고 있지만 라벨과 입력을 쉽게 조작 할 수 있기 때문에 중요하지 않아야한다. 그러나 라벨, 입력, 선택할 때 작동하지 않기를 선택하면 ...

내가 생각했던 해커 한 추악한 방법은 선택을 절대적으로하는 것이라고 생각했지만, 나는 그것을하기에 더 적절한 방법을 찾고 있었다. (그것이 작동할지 확실하지 않은 경우). 가능할 때마다 나는 깨끗한 솔루션을 선호하며, 절대 위치 지정은이를 수정하려고하는 가난한 방법으로 보입니다. 내가 간과하고있는 것이 있을지도 모른다. .. 그것은 내가 여기있는 이유 다. :)

아이디어가 있으십니까?

... 도시 (이 라벨이며, 여기 앉아) (바이올린에 따라) ... I는 무엇을 찾고

(난 정말하거나 이전 버전의 브라우저에 대한 상관 없어)
(라벨 아래에 입력)

전화 번호 (라벨 여기까지)
(여기 입력) (여기에서 선택) ...

.form-outer-container, 
 
.primary-button { 
 
    font-size: 1.025em; 
 
} 
 

 
.form-outer-container { 
 
    padding: 8px 12px; 
 
    background-color: #FCFCFC; 
 
    border-radius: 3px; 
 
    width: 100%; 
 
    overflow: auto; 
 
    display: inline-block; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul > li { 
 
    list-style: none; 
 
    margin: 3px 0 0 0; 
 
    padding: 2px 2px; 
 
} 
 

 
li > label { 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
li > label > input, 
 
li > label > textarea { 
 
    display: block; 
 
} 
 

 
li > label > input[type="checkbox"] { 
 
    display: inline; 
 
} 
 

 
input[type="text"], 
 
input[type="password"], 
 
textarea { 
 
    color: #0a290a; 
 
    border: 1px solid darkgrey; 
 
} 
 

 
.label-input-select-combo > input, 
 
.label-input-select-combo > select { 
 
    /* display: inline-block; */ 
 
} 
 

 
.label-input-select-combo { 
 
    /* display: block !important; */ 
 
}

<ul> 
 
    <li> 
 
    <label>Address 
 
     <textarea rows="3"></textarea> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label>City 
 
     <input type="text" data-bind="city" placeholder="Oshawa" tabindex="3"> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label>Country 
 
     <input type="text" data-bind="country" placeholder="Canada" tabindex="5"> 
 
    </label> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li class="editor sub-editor" data-rest-path="/api/actphone" data-parent-id="cid"> 
 
    <label class="label-input-select-combo">Phone number 
 
     <input type="text" data-bind="phone" placeholder="905-999-3590" tabindex="6"> 
 
     <select data-bind="type"> 
 
     <option value="M">Mobile</option> 
 
     <option value="W" selected>Work</option> 
 
     <option value="H">Home</option> 
 
     <option value="O">Other</option> 
 
     </select> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <button type="button" class="primary-button editor-save">Create</button> 
 
    </li> 
 
</ul>

Answer 1

은 다음 두 가지 옵션이 있습니다 :

1. 랩 <span>의 전화 번호 입력을 선택 드롭 다운과 <span>display: flex;

2. 레이블 텍스트 후 <br/> 태그를 추가 제공하고 제공 the a display: inline-block;

좋아요 이 전자 : 당신은 태그 레이블에있는 모든 포장되어

.form-outer-container, 
 
.primary-button { 
 
    font-size: 1.025em; 
 
} 
 

 
.form-outer-container { 
 
    padding: 8px 12px; 
 
    background-color: #FCFCFC; 
 
    border-radius: 3px; 
 
    width: 100%; 
 
    overflow: auto; 
 
    display: inline-block; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul > li { 
 
    list-style: none; 
 
    margin: 3px 0 0 0; 
 
    padding: 2px 2px; 
 
} 
 

 
li > label { 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
li > label > input, 
 
li > label > textarea { 
 
    display: block; 
 
} 
 

 
li > label > input[type="checkbox"] { 
 
    display: inline; 
 
} 
 

 
input[type="text"], 
 
input[type="password"], 
 
textarea { 
 
    color: #0a290a; 
 
    border: 1px solid darkgrey; 
 
} 
 

 
.input-block { 
 
    display: flex; 
 
} 
 

 
.input--left { 
 
    display: inline-block; 
 
}

<ul> 
 
    <li> 
 
    <label>Address 
 
     <textarea rows="3"></textarea> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label>City 
 
     <input type="text" data-bind="city" placeholder="Oshawa" tabindex="3"> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label>Country 
 
     <input type="text" data-bind="country" placeholder="Canada" tabindex="5"> 
 
    </label> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li class="editor sub-editor" data-rest-path="/api/actphone" data-parent-id="cid"> 
 
    <label>Phone number 
 
     <span class="input-block"> 
 
     <input type="text" data-bind="phone" placeholder="905-999-3590" tabindex="6"> 
 
     <select data-bind="type"> 
 
     <option value="M">Mobile</option> 
 
     <option value="W" selected>Work</option> 
 
     <option value="H">Home</option> 
 
     <option value="O">Other</option> 
 
     </select> 
 
     </span> 
 
    </label> 
 
    </li> 
 
    <li class="editor sub-editor" data-rest-path="/api/actphone" data-parent-id="cid"> 
 
    <label class="label-input-select-combo">Phone number<br/> 
 
     <input type="text" class="input--left" data-bind="phone" placeholder="905-999-3590" tabindex="6"> 
 
     <select data-bind="type"> 
 
     <option value="M">Mobile</option> 
 
     <option value="W" selected>Work</option> 
 
     <option value="H">Home</option> 
 
     <option value="O">Other</option> 
 
     </select> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <button type="button" class="primary-button editor-save">Create</button> 
 
    </li> 
 
</ul>

Answer 2

입력은 전체 너비입니다. 인라인 블록으로 설정해야합니다. 이것은 그것을 같은 줄에 놓고 그 앞에 무엇이 있고 그 뒤에 무엇이있을 것입니다. "전화 번호"뒤에 <br />을 입력하거나 "전화 번호"주위에 div를 입력하여 입력시 같은 줄에 있지 않도록하십시오.

Answer 3

. 태그 레이블은 설명 용으로 만 사용됩니다.당신은 이것에 의해 변경해야

<label class="label-input-select-combo">Phone number</label> 
<input type="text" data-bind="phone" placeholder="905-999-3590" tabindex="6"> 
<select data-bind="type"> 
    <option value="M">Mobile</option> 
    <option value="W" selected>Work</option> 
    <option value="H">Home</option> 
    <option value="O">Other</option> 
</select> 

JsFiddle