0

我有一个选择下拉菜单，它有一个固定的宽度和百分比。我有一个自定义按钮。我想要的是不管选择的当前宽度如何，我希望按钮与右侧保持 20 像素的距离。但是我找不到这样做的方法，因为如果我在 background-position 属性中使用 % ，当窗口很大时，按钮会变得越来越远。而且显然我不能使用像素，因为我必须将它设置为一定的宽度。

html

<div class="selector">
    <select id="layer" name="layer" class="select-button">
        <option value="0"> 0
        </option>
        <option value="1"> 1
        </option>
        <option value="2"> 2
        </option>
        <option value="3"> 3
        </option>
    </select>
</div>​

css

.selector > .select-button {
background-image: url("../img/actions.png");
background-repeat: no-repeat;
background-color: #ffffff;
background-size: 20px 15px;
background-position: 95% 50% ;
float: right;
width: 45%;
font-size: 16px;
border: 0;
height: 50px;
border-radius: 10px;
border: 5px solid black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}​

这是一个 演示

我使用随机图像来更好地展示它。如您所见，如果您扩大窗口，按钮位置会发生变化，因为它是按百分比设置的。无论视口大小如何，我都想让按钮距离右侧绝对 20 像素，但不知道如何实现。

4

1 回答 1

1

你可以：

  • 在右侧的图像中添加 20 个透明像素
  • 使用 jQuery 更新背景位置。
于 2012-08-02T05:30:00.033 回答