마지막 행의 요소에서 테두리를 제거하는 방법은 무엇입니까?
슈퍼 산
내 레이아웃은 다음과 같습니다 (클래스 대신 인라인 스타일로 단순화 된 버전을 입력하고 있습니다)
.qa {
border-bottom: 1px solid #ccc;
}<div style="display: flex; flex-wrap: wrap; flex-direction: row">
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
</div>이것은 기본적으로 다음과 같이 렌더링됩니다.
내 질문은 :
마지막 행의 테두리를 제거하려면 어떻게합니까?
Afif 동반
요소에 음수 하단 여백을 추가 한 다음 오버플로를 숨길 수 있습니다. 원하지 않는 테두리가 숨겨집니다.
.qa {
border-bottom: 1px solid #ccc;
margin-bottom:-1px;
margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/
/*irrelevant styles*/
padding: 5px;
margin-left:5px;
margin-right:5px;
box-sizing: border-box;
flex:1 1 40%;
}
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow:hidden;
}<div class="wrapper">
<div class="qa">
<div>Question</div>
<div>Answer<br>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer<br>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa">
<div>Question</div>
<div>Answer<br>Answer</div>
</div>
</div>이 트릭은 행의 요소 수가 2와 다른 경우에도 작동합니다.
.qa {
border-bottom: 1px solid #ccc;
margin-bottom:-1px;
margin-top:1px;
/*irrelevant styles*/
padding: 5px;
margin-left:5px;
margin-right:5px;
box-sizing: border-box;
flex:1 1 20%;
}
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow:hidden;
}<div class="wrapper">
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer<br> answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer<br> answer</div>
</div>
</div>또한 작은 화면에서 열 수를 변경할 수있는 반응 형 레이아웃에서도 작동합니다.
.qa {
border-bottom: 1px solid #ccc;
margin-bottom:-1px;
margin-top:1px;
/*irrelevant styles*/
padding: 5px;
margin-left:5px;
margin-right:5px;
box-sizing: border-box;
flex:1 1 20%;
}
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow:hidden;
}
@media all and (max-width:800px) {
.qa {
flex:1 1 30%;
}
}
@media all and (max-width:400px) {
.qa {
flex:1 1 40%;
}
}<div class="wrapper">
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer<br> answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer</div>
</div>
<div class="qa" >
<div>Question</div>
<div>Answer<br> answer</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
마지막 행의 요소에서 테두리를 제거하는 방법은 무엇입니까?
- 2
CSS에서 마지막 열의 테두리를 제거하는 방법은 무엇입니까?
- 3
bash에서 배열의 마지막 요소를 제거하는 방법은 무엇입니까?
- 4
CSS를 사용하여 마지막 요소의 테두리를 설정하는 방법은 무엇입니까?
- 5
sed 주소 범위의 마지막 줄에서 쉼표를 제거하는 방법은 무엇입니까?
- 6
부트 스트랩 열의 마지막 행에서 마지막 열과 테두리 아래쪽에 대한 테두리를 제거하는 방법은 무엇입니까?
- 7
C ++에서 큐의 첫 번째 요소와 마지막 요소를 바꾸는 방법은 무엇입니까?
- 8
github에서 마지막 두 번의 푸시 (커밋 및 되돌리기)를 되돌 리거나 실행 취소하는 방법은 무엇입니까?
- 9
Laravel에서 foreachloop의 마지막 항목에서 쉼표를 제거하는 방법은 무엇입니까?
- 10
디렉토리에서 모든 파일의 마지막 줄을 제거하는 방법은 무엇입니까?
- 11
IronPyhon의 문자열에서 마지막 문자를 제거하는 방법은 무엇입니까?
- 12
Java의 문자열 목록에서 마지막 3자를 제거하는 방법은 무엇입니까?
- 13
크롬의 이미지에서 테두리를 제거하는 방법은 무엇입니까?
- 14
안드로이드의 Firestore Array에서 마지막 요소를 검색하는 방법은 무엇입니까?
- 15
MongoDB에서 컬렉션의 마지막 요소를 찾는 방법은 무엇입니까?
- 16
이미지의 테두리를 제거하는 방법은 무엇입니까?
- 17
WPF를 사용하여 그리드의 마지막 행을 제거하는 방법은 무엇입니까?
- 18
마지막 행에서 모든 <li> 요소의 테두리를 제거하려면 어떻게합니까?
- 19
numpy 배열에서 선행 마스크 요소를 제거하는 방법은 무엇입니까?
- 20
시리즈로! 마지막 요소를 제거하는 가장 좋은 방법은 무엇입니까
- 21
파이썬에서 번호 매기기 목록의 마지막 요소의 후행 줄 바꿈을 제거하는 방법은 무엇입니까?
- 22
원하지 않는 문자를 제거하는 URL의 마지막 요소를 얻는 방법은 무엇입니까?
- 23
Django의 쿼리 세트에서 두 번째 마지막 레코드를 얻는 방법은 무엇입니까?
- 24
6 자리 숫자의 두 번째에서 마지막 숫자를 찾는 방법은 무엇입니까?
- 25
GridBagLayout 구성 요소에서 마지막 버튼의 행 높이를 설정하는 방법은 무엇입니까?
- 26
목록의 마지막 요소 앞에 "and"를 추가하는 방법은 무엇입니까?
- 27
SwiftUI 목록에서 마지막 행과 두 번째 행에서 마지막 행 사이의 구분 기호를 색칠 / 제거하는 방법은 무엇입니까?
- 28
마지막 jquery를 제외하고 요소에서 자식 값을 얻는 방법은 무엇입니까?
- 29
파일에서 두 패턴 사이의 마지막 행을 얻는 방법은 무엇입니까?
몇 마디 만하겠습니다