Question

我有一个宽度一定的容器。

我在这个main div container的同一行上有两个选择元素呈现。第一个是从main div container左侧绝对定位40px，右边是从main div container开始绝对定位40px。因此，在main div container内产生了一个居中的容器。

我的目标是将两个选择元素放入生成的容器中，该容器位于其中任一侧，具有相同的宽度，并且在中间具有等距的空间。

这是我目前的HTML：

<div id="container">
    <select class="edit" style="left: 40px; top: 290px; width: 136px;"></select>
    <select class="edit" style="left: 190px; right:40px; top: 290px; width: 136px"></select>
</div>

因此，在本文中，我们假设左边的像素数为40+136=176px, width plus left positioning，右边的像素数为190+136+40=366, left positioning plus width plus right;

结果将是一个容器，在每个40px的约束范围内有两个等距的选择框。

我不确定我的数学是否正确，但对此的任何帮助将不胜感激。

Answer 1

尝试从右侧元素中删除left:190px。 right:40px足以将元素定位在右侧。

Answer 2

我不确定这是否正是您正在寻找的，所以如果我误解了某些内容，请告诉我，但是这个解决方案呢（注意.edit可以很容易有一个严格的基于％的宽度，我只想表明这个解决方案有多灵活）：

https://jsfiddle.net/Lcn51a1p/

<强> HTML：

<div class="container">
    <select class="edit"></select>
    <select class="edit pull-right"></select>
</div>

<强> CSS：

.container {
   margin: 0 40px;
}

.edit {
    width: 120px;
    max-width: 50%;
}

.pull-right {
    float:right;
}

在CSS中平均分隔同一行上的两个选择框

2 个答案: