如何风格谷歌自定义搜索引擎，使其不会't显示为块元素

How to style Google Custom Search Engine so that it doesn't display as a block element

本文关键字：元素 显示 风格 何风格 谷歌 搜索引擎 自定义      更新时间：2023-09-26

我想在导航栏中的菜单项后面的同一行包含谷歌自定义搜索引擎。然而，谷歌自定义搜索引擎默认显示为一个块，并将自己放在菜单项下方的新行中。我曾尝试将它放在<span>中，并将其命名为display:inline; display:inline-block; float:right;等，但都无济于事。我了解到<gcse:searchbox-only></gcse:searchbox-only>是它显示为块元素的原因，但删除它后，搜索框根本不会显示。

注意：在下面的代码段中，html <script>标记将包含它们上面的javascript。CCD_ 7在关闭CCD_ 8标签之后。代码编辑器需要将html和javascript输入到不同的块中。

  (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>

您可以始终使用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像素的搜索栏。

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

相关文章：