세로 단추 그룹
세로 단추 그룹
display:block대신에 float:left다음과 같이 버튼을 그룹화하여 사용하십시오 .
예
.button {
display: block;
}
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
}
.btn-group .button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
.btn-group .button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Vertical Button Group</h2>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1187 | 기타 | 6년 전 | 2274 | ||
| 1186 | 기타 | 6년 전 | 2107 | ||
| 1185 | 기타 | 6년 전 | 2107 | ||
| 1184 | 기타 | 6년 전 | 2114 | ||
| 1183 | 기타 | 6년 전 | 1871 | ||
| 1182 | 기타 | 6년 전 | 2152 | ||
| 1181 | 기타 | 6년 전 | 1738 | ||
| 1180 | 기타 | 6년 전 | 1942 | ||
| 1179 | 기타 | 6년 전 | 2144 | ||
| 1178 | 기타 | 6년 전 | 2232 | ||
| 1177 | 기타 | 6년 전 | 1764 | ||
| 1176 | 기타 | 6년 전 | 1620 | ||
| 1175 | 기타 | 6년 전 | 2091 | ||
| 1174 | 기타 | 6년 전 | 1654 | ||
| 1173 | 기타 | 6년 전 | 1499 | ||
| 1172 | 기타 | 6년 전 | 1683 | ||
| 1171 | 기타 | 6년 전 | 1373 | ||
| 1170 | 기타 | 6년 전 | 1555 | ||
| 1169 | 기타 | 6년 전 | 1289 | ||
| 1168 | 기타 | 6년 전 | 1412 | ||
| 1167 | 기타 | 6년 전 | 1281 | ||
| 1166 | 기타 | 6년 전 | 1598 | ||
| 1165 | 기타 | 6년 전 | 1342 | ||
| 1164 | 기타 | 6년 전 | 1657 | ||
| 1163 | 기타 | 6년 전 | 1628 | ||
| 1162 | 기타 | 6년 전 | 1587 | ||
| 1161 | 기타 | 6년 전 | 3423 | ||
| 1160 | 기타 | 6년 전 | 3098 | ||
| 1159 | 기타 | 6년 전 | 2211 | ||
| 1158 | 기타 | 6년 전 | 1904 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기