Googleカスタム検索エンジンをブロック要素として表示しないようにスタイルを設定するには

Question

同じ行にメニュー項目の後にナビゲーションバーにGoogleカスタム検索エンジンを含めたいとします。ただし、Googleカスタム検索エンジンはデフォルトでブロックとして表示され、メニュー項目の下に新しい行が表示されます。私はそれを<span>の中に入れようとしましたが、それ以外のものの中ではdisplay:inline;display:inline-block;float:right;のようなものはありません。私は<gcse:searchbox-only></gcse:searchbox-only>がそれをブロック要素として表示するものだが、それを取り除くと検索ボックスが全く表示されないことを学んだ。

注：以下のスニペットでは、HTML <script>タグがそれらの上にはJavaScriptを囲むことです。 は、</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

あなたは常にそのIDを使用してのdivのスタイルをCSSを使用することができます。例については

：

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

これは200pxの検索バーを作成します。

EDIT：作業コピーに例を示しました。