小贝子编程

移动导航栏末尾的"搜索"框



我想移动导航栏末尾的搜索图标和搜索输入。我正在使用引导程序5.0.2IDK如何移动最后的图标和搜索框，因为我是Bootstrap、HTML和CSS的新手。此外，我不想增加搜索框的大小，我希望它的宽度为50%，如果我将宽度设为100%，则搜索框和图标最终会消失，但我希望其宽度为50%，并将两者都保留在最终中

.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
<!-- Search box -->
</ul>
<form id="#searchform" class="d-flex">
<input style="width: 50%;" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

我想将搜索输入和搜索图标移动到导航条的末尾

从搜索栏的输入中删除style="width: 50%"。它导致容器的大小是输入的两倍，而搜索图标则小于输入。这就造成了空白。

正如您在注释中所说，您希望width: 50%出现在输入中，您也可以在输入中使用类ms-auto将所有元素移动到flexbox容器的末尾：

.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
<!-- Search box -->
</ul>
<form id="#searchform" class="d-flex">
<input style="width: 50%;" class="form-control me-2 ms-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
<!-- Search box -->
</ul>
<form id="#searchform" class="d-flex">
<input class="form-control me-2 ms-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

.navbar的直接子元素使用flex布局，并将默认对正内容：之间的空格。根据需要使用其他灵活实用程序来调整此行为。https://getbootstrap.com/docs/5.2/utilities/flex/你可以用与css相同的方式使用flex属性，证明self-property是你需要的，我认为

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium