html - 在 div 中移动 2 个元素

Question

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

#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>

标签： htmlcss

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;
    }