Question

所以我正在使用CSS编码文本框。如果您看到上面的链接，您会看到当我将鼠标悬停在按钮上时，“要搜索的类型”在右侧显示时效果很好。

现在，我只是想让按钮的背景也与文本框保持一致。

因此，此处的目标是尝试使框正确向右扩展。

<html>
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
  </script>`enter code here`
  </head>
  <head>
    <title>Using CCS for the first time</title>
  </head>  
  <head>
  <style>
    h1 {

    color: orange;
    text-align: left;

    }

    </style>
    </head>
      <body>
    <h1>
      <span style="font-family:Arial">Hello and welcome to a search box</span>
    </h1>
      </body>  

<head>
<body>
<div class="search-box">

  <input class="search-txt" type="text" name="" placeholder="Type to search">
  <a class="search-btn" href="#">
  <i class="fas fa-search"></i>
  </a>
</div>  
</head>

    </body>
</html>
body {
    margin: 0;
    padding: 0;
    background: red;
   }

.search-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
   }

   .search-box:hover > .search-txt{

       width: 240px;
       padding: 0 6px;
   }

   .search-box:hover > .search-btn{
    background: white;

}

   .search-btn{
    float: left;
    color: red;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4;   
   }

   .search-txt{
    position: absolute;
    float: right;
    border: none;
    background: none;
    outline: none;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
   }

Answer 1

像这样吗？

https://codepen.io/anon/pen/eovbjW

页面上只能有一个HEAD和一个BODY标签。

是float + display:flex为您搞砸了。老实说，我现在很少使用float。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="styles.css">

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

    <title>Using CCS for the first time</title>
  </head>

  <body>
    <h1>Hello and welcome to a search box</h1>

    <div class="search-box">
      <div class="fas fa-search"></div>

      <input class="search-txt" type="text" placeholder="Type to search" />
    </div>  

  </body>
</html>

CSS
[edit]如果您不熟悉CSS变量，则在.search-text中使用了它们作为指导，以了解如何使用它们。在left的{{1}}属性中，我什至使用.search-text将两个CSS变量加在一起。

calc()

CSS搜索框展开

1 个答案: