세로 단추 그룹

· 2017-09-09 (토) 23:59:13 · 2006

세로 단추 그룹



91308e91ff090fb4abed793c1e3856ce_1504969150_4087.png
 

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>


|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 17-09-10 조회 2,018
CSS 17-09-10 조회 2,431
CSS 17-09-09 조회 2,007
CSS 17-09-09 조회 2,257
CSS 17-09-09 조회 2,048
CSS 17-09-07 조회 1,924
CSS 17-09-07 조회 2,293
CSS 17-09-07 조회 1,888
CSS 17-09-06 조회 1,981
CSS 17-09-06 조회 2,083
CSS 17-09-06 조회 2,092
CSS 17-09-02 조회 1,891
CSS 17-09-02 조회 4,587
CSS 17-09-02 조회 2,500
CSS 17-09-01 조회 2,908
CSS 17-09-01 조회 2,439
CSS 17-09-01 조회 2,368
CSS 17-08-31 조회 2,250
CSS 17-08-31 조회 2,534
CSS 17-08-31 조회 2,269
CSS 17-08-29 조회 2,421
CSS 17-08-29 조회 2,801
CSS 17-08-29 조회 2,116
CSS 17-08-25 조회 2,750
CSS 17-08-25 조회 2,174
CSS 17-08-25 조회 1,941
CSS 17-08-24 조회 1,621
CSS 17-08-24 조회 1,943
CSS 17-08-24 조회 2,715
CSS 17-08-23 조회 2,398