Question

我目前正在尝试使容器 div 中的项目均匀分布在一行上。我想要的结果如下：

目前我似乎无法弄清楚如何使项目在同一行上并在可用空间之间均匀分布？

这是我目前拥有的：

前 2 段文字应该在左边，然后接下来的 2 段必须在中间 ish。但彼此之间均匀分布也应该没问题！我尝试使用 justify-content: space-between 但我似乎无法让它工作。

我目前的代码：

<template>
  <div class="container">
    <div class="wrap-text">
      <span class="function-text-bold">{{ functionBold }}</span>
      <span class="function-text">{{ functionDescription }}</span>
    </div>
    <div class="wrap-text">
      <span class="amount-text">Aantal toegelaten studenten per sessie</span>
      <div class="click-amount">
        <button><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z"/></svg></button>
        <span class="function-text">{{ amountPerSession }}</span>
        <button><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg></button>
      </div>
    </div>
    <button>Stel je tijdslot in</button>
    <!-- Rounded switch -->
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
  </div>
</template>

<script>
export default {
  name: "CompanyJobOfferList",
  data() {
    return {};
  },
  props: {
    functionBold: {
      type: String,
      required: true,
    },
    functionDescription: {
      type: String,
      required: true,
    },
    amountPerSession: {
      type: String,
      required: false,
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  margin: 0 auto;
}

.wrap-text {
  display: flex;
  flex-direction: column;
  height: 70px;
  justify-content: space-evenly;
}

.click-amount {
  vertical-align: middle;
  display: flex;
}

.click-amount button{
  border: none;
  width: 25px;
  height: 25px;
  margin: 0px 10px;
}

button {
  border: 2px solid var(--accent-color);
}
</style>

Answer 1

使用表格：Working example

  <table style="table-layout: auto; width:100%">
    <thead>
      <th></th>
    </thead>
    <tbody>
      <tr>
        <td style="width:50%; padding: 0px 20px">
          <div>
            Functie
          </div>
          <div>
            Functieomschrijving
          </div>
        </td>
        <td style="width:50%; padding: 0px 20px">
          <div>
            Aantal toegelaten stunden per sissie
          </div>
          <div>
            [ - ] 0 [ + ]
          </div>
        </td>
        <td style="width:1px; padding: 0px 20px">
          <button style="border: 2px solid black; height: 3rem; width: 10rem">
            Stel je tijdslot in
          </button>
        </td>
        <td style="width:1px; padding: 0px 20px">
          toggle
        </td>
      </tr>
    </tbody>
  </table>

试图使 div 中的项目均匀分布

1 个答案: