레이블과 같은 줄에 입력 요소를 넣는 방법

레이블과 같은 줄에 입력 요소를 어떻게 넣을 수 있습니까?

---

I는 넣고 싶은 label과를 input[type=text]동일한 행 및 I는 위해하고자 input의 폭에 관계없이 라벨 텍스트의 길이의 함유 원소의 나머지 폭을 채우도록 (제 1 화상을 참조).

내가 사용하려고 width: auto;을 위해 input,하지만 정적 폭을 갖고있는 것 같아요. 나도 시도 width: 100%;했지만 input새 줄로 이동합니다 (두 번째 이미지 참조).

CSS를 사용하여 어떻게 이를 달성할 수 있습니까?

---

JavaScript 없이도 가능합니다. http://jsfiddle.net/Khmhk/를 참조하십시오.

이것은 IE7+ 및 모든 최신 브라우저에서 작동합니다.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

이 경우에 마술처럼 유용한 이유 overflow: hidden가 여기 에 설명되어 있습니다 .

---

display: table-cell또 다른 옵션입니다. 참조: http://jsfiddle.net/Khmhk/1/

이것은 IE8+ 및 모든 최신 브라우저 에서 작동 합니다.

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

---

그것은 여전히 ​​나에게 효과적이지만 ftr 이것이 Bootstrap 3이 수행하는 방식입니다 ( "Bootstrap full-width text-input within inline-form" 에 대한 @morten.c의 답변 덕분 ). @thirtydot보다 깨기가 더 어려운지 아니면 무엇이든 모릅니다. 그러나 여기 있고 여기 에 좁은 화면 중단점을 처리하는 방법에 대한 기본 예도 제공 하는 바이올린 이 있습니다.

HTML:

<form class="responsive">
    <input type="text" placeholder="wide input..."/>
    <span>
        <input type="submit"/>
    </span>
</form>

CSS:

form.responsive, form.responsive * {
    box-sizing: border-box;
    width: 100%;
    height: 40px !important; /* specify a height */
}
form.responsive {
    position: relative;
    display: table;
    border-collapse: separate;

    /* just to be safe */
    border: 0;
    padding: 0;
    margin: 0;
}
form.responsive > input {
    position: relative;
    width: 100%;
    float:left;
    margin-bottom: 0;
    display: table-cell;
}
form.responsive span {
    position: relative;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}
form.responsive span input {
    margin: 0;
    margin-left: -1px;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}

ReferenceURL : https://stackoverflow.com/questions/6938900/how-can-i-put-an-input-element-on-the-same-line-as-its-label