입력 옆에 레이블을 형태로 정렬 그러나 나는 그것을하는 방법을 모른다. 내 목표는

입력 옆에 레이블을 올바르게 정렬 해야하는 매우 기본적이고 알려진 형식의 시나리오가 있습니다. 그러나 나는 그것을하는 방법을 모른다.

내 목표는 라벨이 오른쪽 입력 옆에 정렬되는 것입니다. 다음은 원하는 결과의 예입니다.

여기에 이미지 설명을 입력하십시오

나는 당신의 편의를 위해 바이올린을 만들었고 지금 가지고있는 것을 분명히하기 위해 http://jsfiddle.net/WX58z/

단편:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>



답변

하나의 가능한 해결책 :

  • 레이블을 제공하십시오 display: inline-block;
  • 그들에게 고정 폭을 줘
  • 텍스트를 오른쪽으로 정렬

그건:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}​
<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

JSFiddle


답변

여기에 솔루션을 사용할 수 있지만 더 나은 솔루션이라고 생각하는 최신 기술이 만들어졌습니다. CSS 그리드 레이아웃을 사용하면보다 우아한 솔루션을 구성 할 수 있습니다.

아래 CSS는 2 열 “설정”구조를 제공합니다. 첫 번째 열은 오른쪽 정렬 레이블이되고 두 번째 열의 일부 내용이 뒤 따릅니다. 더 복잡한 내용은 <div>로 감싸서 두 번째 열에 표시 할 수 있습니다.

[부수적으로 : CSS를 사용하여 각 레이블을 뒤 따르는 ‘:’을 추가합니다. 이는 스타일 요소이기 때문에 선호합니다.]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }
<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>


답변

전에 이와 같은 질문에 대답하면 결과를 살펴볼 수 있습니다.

필드와 텍스트를 나란히 배치하는 양식 만들기-의미 론적 방법은 무엇입니까?

따라서 동일한 규칙을 바이올린에 적용하려면 다음과 display:inline-block같이 레이블과 입력 그룹을 나란히 표시 하는 데 사용할 수 있습니다 .

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

바이올린 업데이트


답변

나는 이것과 비슷한 것을 사용한다 :

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

스타일:

.form-element label {
    display: inline-block;
    width: 150px;
}


답변

flex-box를 사용해 볼 수도 있습니다.

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>


답변

나는 이것이 오래된 스레드라는 것을 알고 있지만 더 쉬운 해결책은 다음과 같이 레이블 내에 입력을 포함시키는 것입니다.

<label>Label one: <input id="input1" type="text"></label>


답변

다음은 모든 양식 레이블의 일반 레이블 너비입니다. 고정 너비가 없습니다.

모든 레이블이있는 setLabelWidth 계산기를 호출하십시오. 이 기능은 UI에 모든 레이블을로드하고 최대 레이블 너비를 찾습니다. 아래 함수의 반환 값을 모든 레이블에 적용하십시오.

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };