세로 단추 그룹

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>