数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在导航菜单中添加一个输入字段？
在网页上，您可能需要在导航菜单上放置一个输入字段。此类输入字段可用作搜索框，供用户在网站上搜索任何内容。要将搜索输入字段放置在右侧，请使用 float CSS 属性并将其设置为right值。
创建导航菜单
<nav>元素用于在网页上创建菜单。菜单链接使用<a>元素设置 -
<nav> <a class="links selected" href="#">Home</a> <a class="links" href="#">Login</a> <a class="links" href="#">Register</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">More Info</a> <input type="text" placeholder="Search Here.." /> </nav>
设置菜单链接的样式和显示
菜单中的链接使用带内联块值的display属性显示。这将设置高度和宽度。要删除菜单链接中的默认下划线，text_decoration属性设置为none -
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
定位菜单
要定位菜单，请使用overflow和height属性。将这两个属性都设置为auto。这将定位菜单并调整其高度。宽度设置为100%以将菜单的宽度设置为其父容器宽度的100% -
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
创建输入字段
<input>元素创建输入字段。我们已将其放置在<nav>内以将其放置在菜单中。还设置了占位符，以允许用户了解搜索字段的目的，即在此处搜索 -
<input type="text" placeholder="Search Here.." />
定位输入字段
float属性用于将输入字段定位在右侧 -
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
示例
以下是创建包含输入字段的导航菜单的代码 -
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
更新于: 2023年12月8日
409 次查看
广告