制作座位表

Question

所以，我正在制作座位表。到目前为止它还没关系，但我有点卡住了。我正试图让盒子边距更靠近座位。但是，当我尝试调整时，座椅要么变小，要么div会变形。那么，有没有办法在不扭曲座位的情况下改变盒子的边缘？另外，我将6座位为L形。这也可能吗？感谢。

*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
.box {
  margin: 30px auto;
  max-width: 300px;
}
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.seat {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.seat:nth-child(1) {
  margin-right: 14.28571428571429%;
}
.seat:nth-child(4) {
  margin-right: 14.28571428571429%;
}
.seat input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.seat input[type=checkbox]:checked + label {
  background: #bada55;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat input[type=checkbox]:disabled + label {
  background: #ddd;
  text-indent: -9999px;
  overflow: hidden;
}
.seat input[type=checkbox]:disabled + label:after {
  content: "X";
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: false;
}
.seat label {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #f42536;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255,255,255,0.40);
  border-radius: 3px;
}
.seat label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5c6aff;
}
.bar {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.bar:nth-child(1) {
  margin-right: 14.28571428571429%;
}
.bar input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.bar input[type=checkbox]:checked + label {
  background: #bada55;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.bar input[type=checkbox]:disabled + label {
  background: #ddd;
  text-indent: -9999px;
  overflow: hidden;
}
.bar input[type=checkbox]:disabled + label:after {
  content: "Bar";
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.bar input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: false;
}
.bar label {
  display: block;
  position: relative;
  width: 6em;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #c0c0c0;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.bar label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255,255,255,0.40);
  border-radius: 3px;
}
.bar label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5c6aff;
}
}.VIP {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.VIP{
  margin-left: 12em;
}
.VIP input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.VIP input[type=checkbox]:checked + label {
  background: #bada55;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.VIP input[type=checkbox]:disabled + label {
  background: #ddd;
  text-indent: -9999px;
  overflow: hidden;
}
.VIP input[type=checkbox]:disabled + label:after {
  content: "DJ";
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.VIP input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: false;
}
.VIP label {
  display: block;
  position: relative;
  width: 10em;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #f42536;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.VIP label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255,255,255,0.40);
  border-radius: 3px;
}
.VIP label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5c6aff;
}
.DJ {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.DJ:nth-child(1) {
  margin-right: 14.28571428571429%;
}
.DJ input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.DJ input[type=checkbox]:checked + label {
  background: #bada55;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.DJ input[type=checkbox]:disabled + label {
  background: #ddd;
  text-indent: -9999px;
  overflow: hidden;
}
.DJ input[type=checkbox]:disabled + label:after {
  content: "DJ";
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.DJ input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: false;
}
.DJ label {
  display: block;
  position: relative;
  width: 3em;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #c0c0c0;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.DJ label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255,255,255,0.40);
  border-radius: 3px;
}
.DJ label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5c6aff;
}
.seat6 {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.seat6:nth-child(1) {
  margin-right: 14.28571428571429%;
}
.seat6 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.seat6 input[type=checkbox]:checked + label {
  background: #bada55;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat6 input[type=checkbox]:disabled + label {
  background: #ddd;
  text-indent: -9999px;
  overflow: hidden;
}
.seat6 input[type=checkbox]:disabled + label:after {
  content: "Bar";
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.seat6 input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: false;
}
.seat6 label {
  display: block;
  position: relative;
  width: 3em;
  height:2.3em;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #f42536;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat6 label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255,255,255,0.40);
  border-radius: 3px;
}
.seat6 label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5c6aff;
}
.seat2 {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.seat2:nth-child(1) {
  margin-right: 14.28571428571429%;
}
.seat2 input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.seat2 input[type=checkbox]:checked + label {
  background: #bada55;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat2 input[type=checkbox]:disabled + label {
  background: #ddd;
  text-indent: -9999px;
  overflow: hidden;
}
.seat2 input[type=checkbox]:disabled + label:after {
  content: "X";
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.seat2 input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: false;
}
.seat2 label {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #f42536;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat2 label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255,255,255,0.40);
  border-radius: 3px;
}
.seat2 label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5c6aff;
}
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;

<div style="background-color:black;width:390px;margin-left:100px;padding-right:120px">
<div class="box">
  
  <div>
    
  </div>
  <ol>
    <li class="row row--1">
      <ol class="seats" type="A">
        <li class="bar" >
          <input type="checkbox" disabled id="Bar" />
          <label for="Bar">Bar</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="5" />
          <label for="5">5</label>
        </li>
        <li class="seat">
          <input type="checkbox" disabled id="4A" />
          <label for="4A">4A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="4" />
          <label for="4">4</label>
        </li>
        <li class="DJ">
          <input type="checkbox" disabled id="DJ" />
          <label for="1F">DJ</label>
        </li>
      </ol>
    </li>
    <p></p>
    <li class="row row--2">
      <ol class="seats" type="A">
        <li class="VIP">
          <input type="checkbox" id="VIP" />
          <label for="VIP">VIP</label>
        </li>
      </ol>
      <p></p>
    <li class="row row--3">
      <ol class="seats" type="A">
        <li class="seat6">
          <input type="checkbox" id="6" />
          <label for="6">6</label>
        </li>
        <li class="seat2">
          <input type="checkbox" id="1A" />
          <label for="1A">1A</label>
        </li>
        <li class="seat2">
          <input type="checkbox" id="1" />
          <label for="1">1</label>
        </li>
        <li class="seat2">
          <input type="checkbox" id="2" />
          <label for="2">2</label>
        </li>
        <li class="seat2">
          <input type="checkbox" id="2A" />
          <label for="2A">2A</label>
        </li>
        <li class="seat2">
          <input type="checkbox" id="3" />
          <label for="3">3</label>
        </li>
        <li class="seat2">
          <input type="checkbox" id="3A" />
          <label for="3A">3A</label>
        </li>
      </ol>
    </li>
    <div style="margin-left:40px;color:white">Entrance</div>
    
  </ol>
  <div>
    
  </div>
</div>
</div>