Question

如何将两个或多个标签文本相互定位？我认为这个问题只是 CSS 中的一个简单标签，但我已经在论坛上看了一个小时，但找不到解决方案。我想要的只是这样的：

盒子盒子盒子

但我得到的是模块堆叠在不同的顶部而不是并排。这是我目前使用的核心：

.apply_form-birthdatemonth {
  position: relative;
  font-size:20px;
  text-align: left;
  left:37%;
  padding-bottom: 20px;
}

.input-month {
  display:block;
  width: 10%;
  border: 1px solid rgb(70, 70, 70);
  border-radius: 0px;
  padding: 15px 20px;
}

.apply_form-birthdateday {
  position: relative;
  font-size:20px;
  text-align: left;
  left:48%;
  padding-bottom: 20px;
  flex: 1;
}

.input-day{
  display:block;
  width: 10%;
  border: 1px solid rgb(70, 70, 70);
  border-radius: 0px;
  padding: 15px 20px;
  left:48%;
}

.apply_form-birthdateyear {
  position: relative;
  font-size:20px;
  text-align: left;
  left:59%;
  padding-bottom: 20px;
}

.input-year{
  display:block;
  width: 10%;
  border: 1px solid rgb(70, 70, 70);
  border-radius: 0px;
  padding: 15px 20px;
}

<div class="apply_form-birthdatemonth">
            <select class="input-month">
                <option>Month</option>
                <option>January</option>
            </select>
        </div>

        <div class="apply_form-birthdateday">
            <select class="input-day">
                <option>Day</option>
                <option>1</option>
                <option>2</option>
            </select>
        </div>

        <div class="apply_form-birthdateyear">
            <select class="input-year">
                <option>Year</option>
                <option>2021</option>
            </select>
        </div>

Answer 1

我建议您查看 CSS Grid - 它正在迅速成为（如果还没有的话）以您描述的方式对齐元素的事实上的标准！希望这就是您正在寻找的。

Answer 2

使用 display: inline 而不是 display: block

Answer 3

老派的方法是将 .apply_form-birthdatemonth 的 display 属性设置为 inline-block more here 第二个更现代的方法是将 父 div 的 display 属性设置为 flex，如您所见 here 和第三种方法，即再次将 父 div 的 display 属性设置为 grid more here

可能被认为是一种矫枉过正

Answer 4

使用网格的简单实现。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}
.apply_form-birthdatemonth {
  font-size: 20px;
  text-align: left;
  left: 37%;
  padding-bottom: 20px;
}

.input-month {
  display: block;
  width: 20%;
  border: 1px solid rgb(70, 70, 70);
  border-radius: 0px;
  padding: 15px 20px;
}

.apply_form-birthdateday {
  position: relative;
  font-size: 20px;
  text-align: left;
  left: 48%;
  padding-bottom: 20px;
  flex: 1;
}

.input-day {
  display: block;
  width: 20%;
  border: 1px solid rgb(70, 70, 70);
  border-radius: 0px;
  padding: 15px 20px;
  left: 48%;
}

.apply_form-birthdateyear {
  position: relative;
  font-size: 20px;
  text-align: left;
  left: 59%;
  padding-bottom: 20px;
}

.input-year {
  display: block;
  width: 20%;
  border: 1px solid rgb(70, 70, 70);
  border-radius: 0px;
  padding: 15px 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="grid-container">
      <div class="apply_form-birthdatemonth">
        <select class="input-month">
          <option>Month</option>
          <option>January</option>
        </select>
      </div>

      <div class="apply_form-birthdateday">
        <select class="input-day">
          <option>Day</option>
          <option>1</option>
          <option>2</option>
        </select>
      </div>

      <div class="apply_form-birthdateyear">
        <select class="input-year">
          <option>Year</option>
          <option>2021</option>
        </select>
      </div>
    </div>
  </body>
</html>

Answer 5

在二维中定位对象的最佳方法是使用 flexbox，您可以在此处查看 flexbox mdn。对于 3 维对象是按网格也在这里检查 grids mdn

将选择元素彼此相邻放置

5 个答案: