如何设置Google自定义搜索引擎的样式，使其不显示为块元素 [英] How to style Google Custom Search Engine so that it doesn't display as a block element

问题描述

我想在同一行的菜单项后面的导航栏中加入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>< /脚本>< gcse：searchbox-only>< / gcse：searchbox-only>

div class =h2_lin>解决方案

您可以随时使用css来使用其id来设置div的样式。

例如：

 < style> / *新代码在这里！ * / div #___ gcse_0 {display：inline-block; （函数（）{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>这是在搜索< / div>< div style =display：inline-block>之后< div>  

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

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

I want to include Google Custom Search Engine in my navigation bar after the menu items, on the same line. However, Google Custom Search Engine displays as a block by default and puts itself in a new line below the menu items. I have tried to put it inside a <span> and styled it display:inline; display:inline-block; float:right; among many others to no avail. I have learnt that <gcse:searchbox-only></gcse:searchbox-only> is what makes it display as a block element but on removing it the search box doesn't display at all.

NOTE: In the below snippet, html <script> tags are to enclose the javascript above them. <gcse:searchbox-only></gcse:searchbox-only> is after the closing </script> tag. The code editor needed html and javascript to be typed into different blocks.

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

解决方案

You can always use css to style the div by using its id.

For Example:

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

This creates a 200px search bar.

EDIT: Showed an example in a working copy.

这篇关于如何设置Google自定义搜索引擎的样式，使其不显示为块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！