資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
廣告