Question

我使用w3schools' tutorial制作了一个水平导航栏，最终看起来像this，但是当我添加搜索栏时，everything messes up。我该如何解决？

这里是我的代码：

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

Answer 1

如果要使搜索栏与其他li元素对齐，只需将其添加到样式代码中即可：

li > div {
  margin-top: 92px;
}

此li > div是一种CSS选择器，您可以在此link上了解更多信息。然后，您可以根据需要自定义布局。

Answer 2

尝试附加的代码肯定会起作用，如果没有注释您的问题，我会尽力帮助您。

在下面的代码中，我制作了一个名为gs的ID，该ID负责搜索栏的对齐和大小。

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>

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

2 个答案: