javascript - html - 自动匹配上面元素的宽度

Question

在此示例中，main元素尺寸可能会更改（现在它是由 css 定义的 240x320）。我希望controls元素总是匹配main. 是否可以使用 css 或需要从 javascript 更改它？

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

body {
  background-color: #f5e0e0;
}

.video {
  position: relative;
  width: 240px;
  height: 320px;
  background-color: #000000;
  border: 1px solid red;
}

.icon {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
}

.keys {
  height: 40px;
}

<div class="center-screen">
  <video class="video" id="main" autoplay></video>
  <div id="controls" class="icon">
    <ion-icon class="keys" id="home" name="home"></ion-icon>
    <ion-icon class="keys" id="power" name="power"></ion-icon>
    <ion-icon class="keys" id="menu" name="menu"></ion-icon>
    <ion-icon class="keys" id="volumedown" name="volume-low"></ion-icon>
    <ion-icon class="keys" id="volumeup" name="volume-high"></ion-icon>
  </div>
</div>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

输出：

标签： javascripthtmlcss

Answer 1

添加一个额外的包装器，这很容易

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

body {
  background-color: #f5e0e0;
}

.video {
  position: relative;
  width: 240px;
  height: 320px;
  background-color: #000000;
  border: 1px solid red;
  display:block; /*added this to remove white space*/
}

.icon {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
}

.keys {
  height: 40px;
}

<div class="center-screen">
  <div>
    <video class="video" id="main" autoplay></video>
    <div id="controls" class="icon">
      <ion-icon class="keys" id="home" name="home"></ion-icon>
      <ion-icon class="keys" id="power" name="power"></ion-icon>
      <ion-icon class="keys" id="menu" name="menu"></ion-icon>
      <ion-icon class="keys" id="volumedown" name="volume-low"></ion-icon>
      <ion-icon class="keys" id="volumeup" name="volume-high"></ion-icon>
    </div>
  </div>
</div>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>