javascript - 如何设置 Google 自定义搜索引擎的样式，使其不显示为 block 元素

Question

我想将 Google 自定义搜索引擎包含在导航栏中菜单项之后的同一行中。但是，Google 自定义搜索引擎默认显示为 block ，并将其自身置于菜单项下方的新行中。我尝试将其放入 <span> 中并设计它 display:inline; display:inline-block; float:right;等许多人都无济于事。我了解到<gcse:searchbox-only></gcse:searchbox-only>是什么让它显示为 block 元素，但删除它后，搜索框根本不显示。

注意:在下面的代码片段中，html <script>标签用于将上面的 javascript 括起来。 <gcse:searchbox-only></gcse:searchbox-only>收盘后</script>标签。代码编辑器需要将 html 和 javascript 输入到不同的 block 中。

  (function() {
    var cx = '006011447236506019758:t1r90lozvsc';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();

<script>
</script>
<gcse:searchbox-only></gcse:searchbox-only>

Answer 1

您始终可以使用 CSS 通过 ID 来设置 div 的样式。

例如:

<style>
/* New Code Here! */
div#___gcse_0 {
    display: inline-block;
    width: 200px;
}
</style>

<script>
(function() {
    var cx = '006011447236506019758:t1r90lozvsc';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<div style="display: inline-block">This is after the search</div>
<div style="display: inline-block">This is after the text</div>

这将创建一个 200 像素的搜索栏。

编辑:在工作副本中显示了一个示例。