입력 옆의 형태로 레이블 정렬
저는 입력 옆에 레이블을 정확하게 정렬해야 하는 매우 기본적이고 알려진 형태의 시나리오를 가지고 있습니다.하지만 나는 그것을 어떻게 하는지.
제 목표는 오른쪽 입력 옆에 레이블을 정렬하는 것입니다.여기 원하는 결과의 그림 예시가 있습니다.
저는 여러분의 편의를 위해 그리고 제가 지금 가지고 있는 것을 분명히 하기 위해 만지작거렸습니다 - 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>경고: 시대에 뒤떨어진 답변
요즘에는 반드시 고정 폭을 사용하는 것을 피해야 합니다.플렉스박스나 CSS 그리드를 사용하여 대응 가능한 솔루션을 제안할 수 있습니다.다른 답을 보세요.
한 가지 가능한 해결책:
- 라벨 요소에 대한 적절한 고정 폭을 결정하고 다음을 사용하여 설정합니다.
width - 줘봐, 줘봐요.
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>여기서의 솔루션은 효과적이지만, 제가 생각하기에 더 나은 솔루션을 위한 최신 기술이 개발되었습니다.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;
}
이것이 오래된 스레드라는 것을 알고 있지만 다음과 같이 레이블에 입력을 포함하는 것이 더 쉬운 해결책이 될 것입니다.
<label>Label one: <input id="input1" type="text"></label>플렉스박스를 사용해 볼 수도 있습니다.
<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>
다음과 같은 작업을 수행할 수 있습니다.
HTML:
<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>
CSS:
.div{
margin-bottom: 10px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.input{
width: 50%;
}
도움이 되길 바랍니다! :)
다음은 모든 양식 레이블에 대한 일반 레이블 너비입니다.폭을 고정하는 것은 없습니다.
모든 레이블을 사용하여 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
};
};
언급URL : https://stackoverflow.com/questions/9686538/align-labels-in-form-next-to-input
'programing' 카테고리의 다른 글
| 정적 메서드가 아닌 메서드를 정적으로 호출하면 안 됩니다. (0) | 2023.09.12 |
|---|---|
| 컨테이너형 레일 응용 프로그램이 일부 라이브러리를 찾을 수 없습니다. (0) | 2023.09.12 |
| LinkedList - malloc을 사용하여 할당된 메모리를 해제하는 방법 (0) | 2023.09.12 |
| Android 버튼이 On으로 설정되었습니다.TouchListener가 호출되었지만 performClick을 재정의하지 않습니다. (0) | 2023.09.12 |
| 서피스 뷰와 뷰의 차이점은 무엇입니까? (0) | 2023.09.12 |