html - 导航栏中的 Google 自定义搜索引擎搜索栏

问题描述

我使用w3schools 的教程制作了一个水平导航栏，最终看起来像这样，但是当我添加搜索栏时，一切都搞砸了。我该如何解决？

这是我的代码：

<ul>
    <li><a class="logo" href="index.html"><img src="Logo.png"></a></li>
    <li><a class="text" href="gallery.html">Gallery</a></li>
    <li><a class="text" href="#">About Us</a></li>
    <li>
        <script async src="https://cse.google.com/cse.js?cx=006548796792344891984:w08mnitgeri"></script>
        <div class="gcse-search"></div>
    </li>
    <li style="float: right"><a class="text" href="#">Log-in</a></li>
</ul>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
  
li {
    float: left;
}
  
li a.text {
    display: block;
    color: white;
    text-align: center;
    padding: 92px 25px;
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

li a.logo {
    display: block;
    padding: 0px 16px;
}
  
li a:hover {
    background-color: #111;
}

标签： htmlcss

尝试附加代码它肯定会工作，如果不评论你的问题，我会尽力帮助你。

在下面的代码中，我创建了一个名为的 id gs，它负责搜索栏的对齐和大小。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
  
li {
    float: left;
}
  
li a.text {
    display: block;
    color: white;
    text-align: center;
    padding: 92px 25px;
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

li a.logo {
    display: block;
    padding: 0px 16px;
}
  
li a:hover {
    background-color: #111;
}
#gs{
    width: 72vw;
    padding-top: 10vh;
    display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
    <title>Google Search</title>
</head>
<body>
<ul>
    <li><a class="logo" href="index.html"><img src="Logo.png"></a></li>
    <li><a class="text" href="gallery.html">Gallery</a></li>
    <li><a class="text" href="">About Us</a></li>
    <li>
        <script async src="https://cse.google.com/cse.js?cx=006548796792344891984:w08mnitgeri"></script>

        <div class="gcse-search" id="gs"></div>
    </li>
    <li style="float: right"><a class="text" href="#">Log-in</a></li>
</ul>
</body>
</html>

html - 导航栏中的 Google 自定义搜索引擎搜索栏

问题描述

解决方案

推荐阅读