文本框缩小时的按钮对齐（CSS）

Question

好吧，我想做的是，每当我调整页面大小时，我都希望文本框旁边的按钮在文本框旁边对齐，这将导致文本框相应地缩小或扩展（如下所示）有人可以在这里帮我吗？ 先谢谢您的帮助！

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 

 .topnav { background-color: transparent; } .topnav a { display: inline-block; color: black; padding: 14px 16px; text-decoration: none; font-size: 16px; } .topnav .icon { display: none; } .dropdown { float: right; padding-top: 5px; } .hehe { float: right; padding-top: 5px; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: transparent; color: skyblue; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 900px) { .topnav a:not(:nth-child(-n+2)), .dropdown .dropbtn { display: none; } .topnav a:not(:nth-child(-n+2)), .hehe { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 900px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .hehe { float: none; } .topnav.responsive .dropdown-content { position: relative; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } .topnav.responsive .hehe { display: block; width: 100%; text-align: left; } } .searchFeature { border: 1px solid #999; padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */ border-radius: 3px; /* transition: background 0.4s; */ width:40%; position: absolute; top: 18px; left: 75px; } .test { position: absolute; top: 20px; left: 350px; } 

 <div class="topnav" id="myTopnav" ng-controller="searchController"> <a href="#!/index" class="searchba"><img ng-src="" />LOGO</a> <input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button> <div class="hehe"> <a href="">Developer</a> <a href="">Data Enquiry</a> </div> <div class="dropdown"> <button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button> <div class="dropdown-content" > <a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a> </div> </div> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> 

Answer 1

从.test和.searchFeature删除绝对定位，然后将它们包装在flexbox中。 我还建议为输入添加最小宽度。

HTML：

<div class="search-wrapper">
  <input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
  <button class="test">Test</button>
</div>

CSS：

.search-wrapper {
  display: flex;
  flex-direction: row;
}

.test {}

.searchFeature {
  border: 1px solid #999;
  padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  /* transition: background 0.4s; */
  width:40%;
}