javascript - 如何将关闭图标移动到搜索栏的右侧？

Question

我正在制作一个维基百科查看器。单击放大镜时，它会消失并出现搜索栏和关闭图标。

如何将关闭/清除图标移动到搜索栏的右侧？

https://codepen.io/jenlky/pen/WZBLEL

$(document).ready(function(){
  $(".fa-search").click(function(){
    $(".fa-search, form").toggle();
  });
  
});

html, body {
  height: 90%;
  background-color: #033350;
}

h1 {
  text-align: center;
  margin-top: 30px;
  color: white;
}

.container, .row {
  height: 90%;
}

.fa {
  display: inline-block;
  color: orange;
}

/* doesn't work for some reason... 
a, .fa, a:focus {
  outline: none;
  border: none;
}
*/

a:hover {
  opacity: 0.6;
}

form {
  display: none;
}

.searchBar {
  border: 4px solid orange;
  border-radius: 20px;
  padding-left: 15px;
  height: 40px;
  background-color: #033350;
  color: white;
}

.ion-close-round {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/e879f2bf45.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<h1>Wikipedia Viewer</h1>

<div class="container">
  <div class="row justify-content-center align-items-center">
    <i class="fa fa-search fa-3x" aria-hidden="true"></i>
      <form>
        <input type="search" class="searchBar" size="20px;" id="search" autocomplete="off" placeholder="Search Wikipedia">
        <i class="icon ion-close-round"></i>
    </form>
    <a class="btn" target="_blank" href="https://en.wikipedia.org/wiki/Special:Random"><i class="fa fa-random fa-3x" title="Random article" aria-hidden="true"></i></a>
  </div>
</div>

Answer 1

将此添加到您的 CSS 文件中。使关闭按钮成为绝对位置允许元素 float 在搜索字段的顶部，并设置表单以定位相对约束关闭按钮的顶部和右侧值。还向 .searchBar 添加 padding-right 允许输入的文本不会溢出关闭图标。

form {
    position: relative;
}
.ion-close-round {
    position: absolute;
    color: orange;
    right: 15px;
    top: 7px;
}
.searchBar {
    padding-right: 30px;
}