답변 4개 / 댓글 7개
채택된 답변
+20 포인트
2년 전
구조를 바꾸지 않고서는 답이 없을듯 합니다. css로 바꿔보시는게 좋을듯합니다.
답변에 대한 댓글 2개
2년 전
jihan006tailwind 관련 질문은 여기에선 답변받기 어려울 겁니다. 다른 곳을 찾아보세요.
tailwind 사용하면서 고정된 너비와 높이를 이렇게 적극적으로 사용하는 경우는 처음 봅니다.
flex나 grid를 활용해보세요.
button 태그 사이에 공백이 끼어있으므로 1개로 축소되어 표현되므로 버튼 사이에 여백이 생긴겁니다.
아주 옛날옛적에는 태그 사이의 공백을 제거하거나 float 로 붙이는 방법을 사용했겠지만 아주 오래된 옛날에나 그랬던거고, 위와 같은 경우는 flex나 grid를 사용하여 해결할 수 있습니다.
답변에 대한 댓글 1개
2년 전
따로 스타일이 없다면 버튼간 줄바꿈하지팔고 붙여어 연속으로 만드세요
답변에 대한 댓글 1개
비버팩토리css border 확인해보세요 여기서 뭐 display:inline-block 이 있으면 flex로 해보세요
아님 플롯도 괜찮구요 그리고 버튼 css에 보면 마진 패딩도 확인해보세요
답변에 대한 댓글 3개
lagnnn
2년 전
tailwind 여서 css를 따로 쓰지 않고 사용하고 있는데 css border나 css 마진 패딩을 따로 쓴 적이 없습니다 혹시 제가 모르는 다른 방법이 있는 건가요 ??
답변을 작성하려면 로그인이 필요합니다.
<style>
.button { display: flex; justify-content: space-between; width: 100%; }
.button button {
background-color: #3a425d;
color: white;
width: 240px;
height: 50px;
margin-right: 10px; /* 여백사이값 */
}
.button-container button:last-child { margin-right: 0; }
</style>
<div class="button">
<button type="button">전체</button>
<button type="button">잡코리아</button>
<button type="button">알바몬</button>
<button type="button">메일광고</button>
</div>