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

Question

我想将 google 自定义搜索框对齐到我的网页左侧。我正在使用名为 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>

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

How to align Google Custom Search box?

html

javascript

css

uisearchbar

google-custom-search