Question

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

注意：在下面的代码段中，html <script>标记用于将javascript括在它们上方。 <gcse:searchbox-only></gcse:searchbox-only>位于结束</script>标记之后。代码编辑器需要将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>

Answer 1

你总是可以使用css来设置div的样式。

例如：

＆＃13;

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

＆＃13;

这会创建一个200px的搜索栏。

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

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

1 个答案: