如何对齐Google自定义搜索框？

Question

我想将谷歌自定义搜索框对齐到我的网页左侧。我正在使用名为imxprs的网站构建器。我将此代码用于自定义搜索框。

<script>
  (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

我怎样才能做到这一点？可选：如果有人正在使用imxprs，你知道如何使用博客元素的H1在同一行上创建搜索框，如图所示>> Like this, I photoshoped it!

Answer 1

您可以做的是将<gcse:search></gcse:search>标记包装在div中，然后您可以在该div上应用属性以满足您的标准，就像在正常开发过程中一样。看一下代码片段

#searchContainer {
width: 49%;
float: right;
display: inline-block;
}

#heading {
display: inline-block;
width: 49%;
}

.container {
display: flex;
align-items: center;
}

<script>
  (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div class="container">
<h1 id="heading">Articles</h1>
<div id="searchContainer">
<gcse:search></gcse:search>
</div>
</div>

Answer 2

(function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();

.container{
  width: 400px;
  float: right;
}

h1{
  float: left;
}

<h1> Hello, World </h1>
<div class="container">
  <gcse:search></gcse:search>
</div>