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相同的行上创建搜索框，如图片＆gt;＆gt; 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

＆＃13;

(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);
  })();

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: