javascript - JavaScript/SASS:如何根据输入字段的宽度覆盖Google Maps API v3自动填充下拉菜单的默认宽度？

我遇到一个问题，其中自动完成下拉列表（类为“ pac-container”的div）始终缺少4个像素，与输入字段的右侧对齐。如下所示：



这是HTML：

<input id="autocomplete" size="50" placeholder="Enter your address" type="text"></input>

和JavaScript：

function initialize() {
  var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
  new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
}

initialize();

这是JSFiddle片段：http://jsfiddle.net/GVdK6/524/

Google Maps API自动计算该宽度，并通过内联样式将其应用于下拉菜单。我希望它具有相同的宽度并与输入字段对齐。输入字段的宽度可以根据size属性而变化，因此在CSS中使用！important规则将pac-container的宽度设置为固定值不起作用。任何帮助，将不胜感激，谢谢！

最佳答案

尝试将pac-container上的box-sizing更改为content-box

.pac-container {
  box-sizing: content-box;
  padding-right: 4px;
}

http://jsfiddle.net/bzx7dk2o/