How To Style Google Custom Search Engine So That It Doesn't Display As A Block Element

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 p

Solution 1:

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><divstyle="display: inline-block">This is after the search</div><divstyle="display: inline-block">This is after the text</div>

This creates a 200px search bar.

EDIT: Showed an example in a working copy.