홈>
아래 이미지는 내 문제를 보여줍니다. 텍스트가 유연하게 표시되어 쌓여 있습니다. 이 필드와 같이 더 많은 필드가 있으므로 모든 필드에 너비를 설정하고 싶지 않습니다.
너비 : 자동을 시도했지만 작동하지 않습니다.
너비를 약 15 %로 확장 할 수 있지만이 필드와 같이 더 많은 필드를 가지므로 모든 너비를 설정하고 싶지 않습니다.
<div class="container">
<h2>Section I.</h2>
<div class="row">
<div class="col one">
<label for="origin__location">Origin Location</label>
<div class="underline"></div>
</div>
</div>
</div>
[.container{
margin-left: 1em;
}
.row{
width: 100%;
display: flex;
margin-bottom: 2em;
margin-left: 10px;
}
.col{
display: flex;
}
.one{
flex: 1;
}
label{
width: auto;
}
.underline{
border-bottom: solid .5px #000;
width: 100%;
margin-left: 1em;
}
텍스트가 한 줄로되어 있고 이미 가지고있는 것보다 더 많거나 적은 문자가있는 단어를 처리하고 싶습니다.
- 답변 # 1
- 답변 # 2
와이즈 비즈를 설정할 수 있습니다 당신을 위해 정의
width
요소, 고정 너비 또는 백분율 :label
.container{ margin-left: 1em; } .row{ width: 100%; display: flex; margin-bottom: 2em; margin-left: 10px; } .col{ display: flex; width: 120px; } .one{ flex: 1; } label{ width: 25%; } .underline{ border-bottom: 0.5px solid black; width: 100%; margin-left: 1em; }
<div class="container"> <h2>Section I.</h2> <div class="row"> <div class="col one"> <label for="origin__location">Origin Location</label> <div class="underline"></div> </div> </div> </div>
관련 자료
- html - 스택 대신 나란히 표시 버튼
- microcontroller - 세마포어와 함께 ISR 함수를 사용하는 이유는 무엇입니까?
- python - URL이 pk2가 아닌 pk 매개 변수와 작동하는 이유는 무엇입니까?
- angular - angular4를 사용하여 html로 데이터 표시
- unity3d - 왜 다른 유형으로 컴파일됩니까?
- css - 같은 줄에 문자와 구성 요소 문자를 표시하는 방법
- cassandra - 이름 프로필로 UDT를 만들 수없는 이유는 무엇입니까?
- c++ - 구분 기호가있는 텍스트 파일에서 읽기
- html - 왜 긴 텍스트가 이름 아래에 나타 납니까?
- Java에서 정규식으로 텍스트 분할
- mysql에서 정규식으로 조인을 사용할 수없는 이유는 무엇입니까?
- python - 텍스트를 공백으로 둘러싸는 방법은 무엇입니까?
- JSON 텍스트를 JQ로 바꾸기
- r - quanteda - 새로운 텍스트와 오래된 어휘를 가진 dtm
- C에서 컬러로 텍스트 인쇄
- .net core - C #에서 매개 변수로 텍스트가있는 Csv 파일 읽기
- c# - Update ()가 text를 설정하지 않는 이유는 무엇입니까?
- css - 링크로 만들 때 텍스트의 위치가 변경되는 이유는 무엇입니까?
- bash - 공백으로 텍스트 바꾸기 OSX Sed
- javascript - 화면에 경고가있는 텍스트를 복사하는 방법
관련 질문
- html : 선택 입력을 클릭할 때 배경 이미지가 확대되는 이유
- html : Mkdocs의 일부 페이지에만 CSS 요소 적용
- javascript : 이 code를 더 잘 작성하고 유사하게 만드는 방법은 무엇입니까? 자바스크립트
- html : 내부 테이블의 내용을 중앙으로 가져오기
- javascript : 이미지 위에 여러 색상이 있는 CSS 오버레이
- javascript : CSS가 추가되면 JS 색상 변경이 작동을 멈춥니다.
- javascript : 동일한 이름을 가진 여러 클래스에 액세스하고 변경하고 반복하여 클릭 시 CSS 변경 사항을 추가하는 방법은 무엇입니까?
- html : cfml 페이지에서 css가 있는 가운데 확인란
- javascript : HTML/CSS 슬라이더가 올바르게 반복되지 않음
- html : 팝업 메뉴가 페이지 여백을 엉망으로 만듭니다.
white-space:pre;
를 추가했습니다label
로 .