HTML – 兄弟按钮收缩和增长

概述input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 25px; font-size: 16px; background-color: white; padding: 5px 0px 5px 10px; -webkit-trans

input[type=text] {  wIDth: 130px;  Box-sizing: border-Box;  border: 2px solID #ccc;  border-radius: 25px;  Font-size: 16px;  background-color: white;  padding: 5px 0px 5px 10px;  -webkit-Transition: wIDth 0.4s ease-in-out;  Transition: wIDth 0.4s ease-in-out;  right: 10px;  position: fixed;}input[type=text]:focus {  wIDth: 96%;}.navbar {    background: #fff;    border: none;    border-bottom-left-radius: 25px;    border-bottom-right-radius: 25px;    Box-shadow: 1px 1px 3px rgba(0,0.1);}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/CSS/bootstrap.min.CSS" rel="stylesheet"/><nav  >  <div >     <button type="button" ID="sIDebarCollapse" >       <i ></i>       <span>table Of Contents</span>     </button>     <input type="text" name="search" placeholder="Search...">  </div></nav>

请有人帮助我.如何在转移(从右到左)缩小按钮,直到输入处于焦点时消失.当焦点不在输入时,从过渡(从左到右)增长.谢谢.

解决方法 你正在使用bootstrap 4所以你可以依靠flexBox属性来调整HTML结构,以便能够保持相同的视觉效果并在输入onfocus时控制按钮.您不需要输入输入位置：固定,因为容器已经固定

这是一个例子：

input[type=text] {  wIDth: 130px;  border: 2px solID #ccc;  border-radius: 25px;  padding: 5px 0px 5px 10px;  Transition: wIDth 0.4s ease-in-out;}input[type=text]:focus {  wIDth: 100%;}input[type=text]:focus+.btn {  wIDth: 0;  padding: 0;  border-wIDth:0;}.navbar {  background-color:#6d7fcc;  border-bottom-left-radius: 25px;  border-bottom-right-radius: 25px;  Box-shadow: 1px 1px 3px rgba(0,0.1);}.navbar .btn {  min-wIDth: 0;  wIDth: 180px;  Transition: all 0.4s ease-in-out;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/CSS/bootstrap.min.CSS" rel="stylesheet" /><link rel="stylesheet" href="https://use.Fontawesome.com/releases/v5.7.2/CSS/all.CSS"><nav >  <div >    <input type="text" name="search"  placeholder="Search...">    <button type="button" ID="sIDebarCollapse" >       <i ></i>       <span>table Of Contents</span>     </button>  </div></nav>

总结

以上是内存溢出为你收集整理的HTML – 兄弟按钮收缩和增长全部内容，希望文章能够帮你解决HTML – 兄弟按钮收缩和增长所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。