在一个div中移动2个元素

Question

在div中有一个h1和可点击的图像，称为#search-bar（不幸的是，我不知道在哪里添加相关的图像。抱歉）我想像我做的那样将它们分开。我想知道有没有更简单、更好的解决方案来缩短CSS代码。谢谢。

null

#search-bar {
    background: #C75000;
    margin: 20px 90px 20px 75px;
    padding: 1rem;
    color:white;

}

#search-bar a, h1{
    display:inline-block;
    /* transform: translateX(50%); */
    border: 5px solid black;
    position: relative;
    left: 200px;
}   

#search-bar h1{
    left:50px;
}

#search-bar a{
    left:400px;
}

<div id="search-bar">
            <h1>Can I use?</h1>  
            <a href="https://www.amazon.com/">
                <img alt="cog" src="cog-trans.png" width="30" height="30">
             </a>
        </div>

null

Answer 1

使用flexbox设置样式（示例）

    #search-bar {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #c75000;
      margin: 20px 90px 20px 75px;
      padding: 1rem;
      color: white;
    }