html - 更改 HTML 的宽度
问题描述
我在导航栏中有一个被表单包围的输入字段,我想将表单的大小减小到它当前所在容器宽度的 75% 左右。
当没有<form></form>
时,输入正好是它所在容器大小的 75%,看起来很完美。
不完整的导航栏 HTML 代码:
<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container" id="home">
<form method="post">
<div class="input-group md-form form-sm form-2 pl-0" id="search" method="post">
<input type="text" name ="search" id ="search" placeholder="Search Users" aria-label="Search" class="form-control my-0 py-1">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="navbarButton"><i class="fas fa-search text-grey" aria-hidden="true"></i></button>
</div>
</div>
</form>
<button class="navbar-toggler ml-auto" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
我试过的CSS代码:
#search {
max-width: 75%;
}
form {
width: 75%;
}
无论屏幕宽度如何,表单都不会改变大小并保持相同的大小。
解决方案
在我看来很好:
.container{
width: 100%;
background: tomato;
}
#search {
max-width: 75%;
}
form {
width: 75%;
background: gray;
margin: 0 auto;
}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container" id="home">
<form method="post">
<div class="input-group md-form form-sm form-2 pl-0" id="search" method="post">
<input type="text" name ="search" id ="search" placeholder="Search Users" aria-label="Search" class="form-control my-0 py-1">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="navbarButton"><i class="fas fa-search text-grey" aria-hidden="true"></i></button>
</div>
</div>
</form>
<button class="navbar-toggler ml-auto" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
推荐阅读
- javascript - apollo react hooks中fetchMore函数的updateQuery似乎没有做任何事情
- parallel-processing - 使用 OpenMP 缩减时的精度损失
- java - java中带有3个验证参数的输入验证
- reactjs - GLTF 文件部分加载为黑色 ThreeJS、React、Typescript、如何为所有 3D 对象添加颜色/灯光
- pandas - 使用 .get_file() 将自定义数据加载到 TensorFlow
- regex - 如何解决 AppleScript 中的这些 grep 错误?
- linux - 如何在不登录的情况下知道公开可用的 ntp 池服务器上的当前时间?
- c# - 从未显示最后一个值的滑块值更改事件触发任务
- powershell - 如何排除 Pester 配置中的路径?
- neo4j - Cypher Neo4J 请求中的奇怪错误