그누보드 QA - 버튼 중앙으로 옮기기

버튼 중앙으로 옮기기

2024.08.07 12:18:05 6599 (121.♡.♡.231)

본문

더보기 펼치기 버튼을 구현한 내용입니다.(인터넷에서 퍼온 것입니다)
잘 작동하는데, 더보기(닫기) 버튼이 죄측에 있어서요, 이거를 중앙으로 위치시키려고 하는데요,
여러가지 방법을 시도해보았으나 잘 되지 않아서 문의드립니다
버튼 중앙 위치 방법 알려주시면 감사하겠습니다^^ 고수님께 고맙습니다^^

https://johogun.com/test10.html 참조페이지입니다

.card-header {
padding: 0 1rem;
margin: 2rem 0;
font-size: 24px;
}

.card-description {
font-size: 20px;
padding: 1rem;

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.card-content-img {
width: 100%;
}

.card-content__more-btn {
appearance: none;
border: 1px solid black;
padding: 0.5em;
border-radius: 0.25em;
cursor: pointer;
margin: 1rem;
}

.card-content__more-btn::before {
content: '더보기';
}

.card-content__more-btn:checked::before {
content: '닫기';
}

.card-description:has(+ .card-content__more-btn:checked) {
-webkit-line-clamp:unset
}
</style>

<div class="card-content">
<img
src="https://images.unsplash.com/photo-1647773319917-f9a98647f6b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
alt="바다 사진"
class="card-content-img"
/>
<h1 class="card-header">테스트입니다</h1>
<p class="card-description">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis esse
fugit nihil earum aut nobis, praesentium illum expedita quia, mollitia
possimus sed, numquam et velit aspernatur tenetur vero doloremque ipsum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero corporis
sunt suscipit beatae rerum exercitationem aliquam architecto? Aspernatur
ex in cum suscipit iusto repudiandae dolores hic, rerum, quae voluptatem
quidem.
</p>
<input type="checkbox" class="card-content__more-btn">
</div>

#css #php

답변 1

미니님a 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-08-07 12:40:22 58.♡.♡.26

아래와 같이 html + css 변경해주세요


<div class="card-content__more">
  <input type="checkbox" class="card-content__more-btn">
</div>


.card-content__more{justify-content: center; display:flex;}

↳ 개성인 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024-08-07 13:09:23121.♡.♡.231

아 예 마음속 깊이 정말 감사드립니다. 그런데 알려주신 대로 하니까 펼치기 더보기 펼치기 기능이 작동하지를 않네요,,, 어떻게 해야 할지,,,, https://johogun.com/test11.html 이곳에서 확인가능합니다,,,,

↳ 미니님a 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024-08-07 14:09:5258.♡.♡.26

맨 하단에...아래 코드 그대로 복붙해주세요

<script>
document.querySelector('.card-content__more-btn').addEventListener('change', function () {
var description = document.querySelector('.card-description');
if (this.checked) {
description.style.display = '-webkit-box';
description.style.webkitLineClamp = 'unset';
} else {
description.style.display = '-webkit-box';
description.style.webkitLineClamp = '3';
}
});
</script>