问题描述
我想在同一行的菜单项后面的导航栏中加入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输入到不同的块中。
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自定义搜索引擎的样式,使其不显示为块元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!