html - 对称排列绝对定位元素

Question

我一直在为搜索下的用户制作一个选择菜单，对于每个选择按钮我都有 div:

    <div class="statbox">
        <select class="selectbox" id="stattrak">
            <option value="any"></option>
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
        <label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">&#9654;</b></label>

及其风格:

.statbox {
  position: absolute;
  margin-left: 4.5%;
  top: 75px;
}
#stattrak {
  height: 25px;
  width: 120px;
  font-size: 12px;
  background-color: white;
}
.stattext {
  float: left;
  margin-right: 10px;
  margin-top: 2px;
  color: white;
  font-family: 'Lato';
  font-size: 15px;
}

因此，正如您所见，div 本身具有绝对位置，然后是文本标签 float:left被使用所以它可以在框的左侧，并且 #stattrak本身就是<select>元素跟随其父元素的位置。

但我有多个选择选项，我希望它们在每个 y 和 x 维度上都正确对齐。请参阅code result .

如果您从 1280x800 分辨率看代码，它应该看起来非常好，但是当您缩小它时，选择框会相互重叠，并且在更高维度时看起来不对称:

更高分辨率:

这些元素的父元素是mover div 容器，样式为:

.mover {
  margin: 0 auto;
  max-width: 61%;
}

它会自动居中。

我也尝试过使用 display: inline-block;方法，我在两个元素上试过，其中一个应该在左边，第二个在中间，样式规则是:'.statbox { display: inline-block;边际权利:60%；顶部边距:15px； }` 和第二个应该居中的容器:.conbox { display: inline-block;边际权利:60%；顶部边距:15px； }.如您所见，conbox messed up .

设计:

有 3 个 <select>第一行的元素，左边一个，中间第二个，右边第三个。

第二行有2个元素，一左一右

在发生这种情况时，我尝试让这些元素在左侧、中间和右侧准确对称地对齐。

---

我试过了float: ;选项但无法按我的需要工作，可能是什么问题？ float 选项有效吗？如果不是，那么保持元素与对称差异对齐的最佳方法是什么？如果有更好的方法，我不需要它们绝对定位，谢谢! ( JFiddle )

如果您在 jsfiddle 中给出最终结论，我将不胜感激。

Answer 1

绝对定位的元素从文档流中移除，这意味着它们不能使用像 float 这样的规则对称定位，您可以定位父 div absolute 并将元素定位在 relative 中:

<div class="parent">
     <div class="statbox">
        <select class="selectbox" id="stattrak">
            <option value="any"></option>
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
        <label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">&#9654;</b></label>
     </div>
     <div class="statbox">
        <select class="selectbox" id="stattrak">
            <option value="any"></option>
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
        <label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">&#9654;</b></label>
     </div>
</div>

CSS:

.parent{
  position: absolute;
  margin-left: 4.5%;
  top: 75px;
}

.statbox {
  position: relative;
  float: left;
}
#stattrak {
  height: 25px;
  width: 120px;
  font-size: 12px;
  background-color: white;
}
.stattext {
  margin-right: 10px;
  margin-top: 2px;
  color: white;
  font-family: 'Lato';
  font-size: 15px;
}