Question

这是我到目前为止的代码，我想知道如何使搜索栏适合导航栏。请帮助，对不起，我不擅长编码这是我参加的信息技术课程。

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #8A1414;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Movies</a></li>
  <li><a href="#contact">TV</a></li>
  <li><a href="#about">About</a></li>
  <input id="search-bar" name="search" type="text" placeholder="Search...">
  <input id="search-button" name="search_submit" type="submit" value="Search">
</ul>
</body>

Answer 1

您的HTML无效。您只能li作为ul的孩子

所以我们需要做一些改变。

我建议像：

我们将搜索输入从他们不属于的ul中取出。将它们包裹在自己的div中并向右浮动。

将整批（ul和搜索div）包裹在nav元素中。

将search输入设为display:inline-block，然后应用您想要的任何宽度。

Codepen Demo

nav {
  background-color: #8A1414;
  overflow: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.search {
  float: right;
  padding: 14px 0;
}
.search #search-bar {
  display: inline-block;
  width: 100px;
  /* your width here */
  /* 100px for SO Snippet only */
}

<nav>
  <ul>
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href="#news">Movies</a>
    </li>
    <li><a href="#contact">TV</a>
    </li>
    <li><a href="#about">About</a>
    </li>

  </ul>
  <div class="search">
    <input id="search-bar" name="search" type="text" placeholder="Search...">
    <input id="search-button" name="search_submit" type="submit" value="Search">
  </div>
</nav>

Answer 2

这是你想要的吗？输入你的css代码：

input#search-bar {
margin-top: 10px;
}

Answer 3

如果要设置增加宽度，请将其放在css / style标签

中

#search-bar{ width: 300px }

您可以根据自己的喜好调整值。

如果你想在布局中正确调整搜索栏，我可以建议以下属性，你也可以调整它们的值。

#search-bar{
             width: 300px;
             height: 20px;
             margin-top: 10px;
             margin-left: 600px; 
           }

您应该访问w3c学校网站，以便更好地理解CSS和HTML。

如何让搜索栏更大？

3 个答案: