css - 如何设置样式以在 div 内显示输入搜索框

Question

我想search nominations...用类名在上面的 div 中显示输入文本nominationsearch_Home我尝试了以下 css，但看起来不太好。请对此有任何建议吗？

.nominationsearch_Home {
  width: 230px !important;
  height: 28px;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border: 1px solid #ededed;
  width: 100%;
  box-shadow: 0 5px 30px rgba(156,160,171,.25);
  border-radius: 2px;
}

.nominationsearch_Icon img{
  height:30px;
  width: 30px;
  position: relative;
  padding-bottom: 0px !important;
  display :flex;
}

input {
  margin: 0px 0px 10px 0px !important;
}

     



      <label>
        <div className="nominationsearch_Home">
            <div className="nominationsearch_Icon">
                <img alt="" src="/images/search.png"></img>
            </div>
           <input type="text" className="nomination_Home_Input" placeholder="search nominations..."/>
        </div>
    </label>

标签： css

Answer 1

尝试使用弹性

.nominationsearch_Home {
    display: flex;
    align-items: center;
}