javascript - 我正在尝试让 css 和 html 工作

Question

我试图在单击搜索按钮时显示搜索栏，尽管该按钮甚至没有出现。我得到的最好的就是完全摆脱按钮，但它只给了我一个搜索栏

<style>

 .status-menu-container .search-container #search-button {
          display: inline-block;
          height: 22px;
          margin-top: 15px;
          color: #DB1C03;
          font-size: 2.6em;
          vertical-align: middle;


      .status-menu-container .search-container #search-box {
          display: inline-block;
          width: 0;
          height: 22px;
          overflow: hidden;
          margin-top: 13px;
          -webkit-transition: width 0.3s;
          -moz-transition: width 0.3s;
          transition: width 0.3s;
          -webkit-backface-visibility: hidden;
          vertical-align: middle;
      }


</style>


      <div class="search-container">
        <div id="search-box" class=""><input type="text" value=""></div>
        <a id="search-button" href="javascript: void(0);">
          <i class="fa fa-search"></i>
        </a>
      </div>

标签： javascripthtmlcss

Answer 1

试试这个，你的 css 代码中有一些错误。

我已经在我编辑你的代码的地方发表了评论。

.search-container  #search-button {
    display: inline-block;
    margin-top: 15px; /* why margin top? */
    color: #DB1C03;
    font-size: 2.6em;
    vertical-align: middle;
    width: 25px; /* add width */
    height: 25px; /* add height */
    background: red; /* remove this - added only for clarity */
} /* closed this tag */

.search-container #search-box {
     display: inline-block;
     width: auto; /* why set width to 0? */
     height: 55px; /* remove or adjust this as the height is not enough to show the element */
     overflow: hidden;
     margin-top: 13px;
     -webkit-transition: width 0.3s;
     -moz-transition: width 0.3s;
     transition: width 0.3s;
     -webkit-backface-visibility: hidden;
      vertical-align: middle;
}

<div class="search-container">
    <div id="search-box" class=""><input type="text" value=""></div>
    <a id="search-button" href="javascript: void(0);">
        <i class="fa fa-search"></i>
    </a>
</div>