设计：

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％; margin-top：15px;应该居中的第二个容器：.conbox {display：inline-block;保证金权利：60％; margin-top：15px; }。正如你看到conbox messed up。

设计：

第一行有3个<select>元素，一个应该是左边，第二个是中心，第三个是右边。

在第二行，有2个元素，一个应该在第二个左边。

虽然这种情况正在发生，但我尝试的是这些元素将在左，中，右对齐。

我已尝试float: ;选项，但无法正常工作，问题可能是什么？浮动选项有效吗？如果没有，那么保持项目与对称差异对齐的最佳方法是什么？如果有更好的方法，我不需要它们绝对定位，谢谢！（JFiddle）

如果你在jsfiddle中给出最终结论，我将非常感激。

Answer 1

绝对定位元素从文档流中删除，这意味着它们不能使用像float这样的规则进行对称定位，您可以将父div定位为绝对，并将元素置于相对的位置：

<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;
}

对称排列绝对定位元素

设计：

1 个答案: