Question

我在我的网站上添加了Google商家信息自动填充框。

#pac-card.pac-card
  div
    #pac-title
      | Autocomplete search
    #type-selector.pac-controls
      input#changetype-all(type='radio', name='type', checked='checked')
      label(for='changetype-all') All
      input#changetype-establishment(type='radio', name='type')
      label(for='changetype-establishment') Establishments
      input#changetype-address(type='radio', name='type')
      label(for='changetype-address') Addresses
      input#changetype-geocode(type='radio', name='type')
      label(for='changetype-geocode') Geocodes
    #strict-bounds-selector.pac-controls
      input#use-strict-bounds(type='checkbox', value='')
      label(for='use-strict-bounds') Strict Bounds
  #pac-container
    input#pac-input(type='text', placeholder='Enter a location')

并定义了样式表：

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

我在页面上包含样式表。样式表不适用于HTML的可能原因是什么？

代码是正确的，因为我在jsfiddle上试了一下。

Answer 1

您的代码不是HTML（可能是生成HTML的模板代码？）。我看了一下Place Autocomplete文档（https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=fr），HTML看起来应该是这样的：

<input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-address">
      <label for="changetype-address">Addresses</label>

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map"></div>

在这段代码中，我看不到任何div的＃pac-container id。

首先，确保生成的HTML具有与您的样式对应的正确CSS选择器。

样式表不适用于HTML？

1 个答案: