将 IconButton 与一行中的文本对齐答案

【问题标题】：Align IconButton with Text in a line将 IconButton 与一行中的文本对齐
【发布时间】：2021-09-01 17:35:28
【问题描述】：

我需要将 IconButtons 与纯文本放在一个文本中。但是，它并没有像我预期的那样显示。这是我所做的：

JS(ReactJS)：

<div>
  <span>
    <h3>Title</h3>
    <IconButton className="editBtn" size="small">
      <EditIcon style={{ fontSize: 25 }} />
    </IconButton>

    <IconButton className="deleteBtn" size="small">
      <DeleteIcon style={{ fontSize: 25 }} />
    </IconButton>
  </span>

  <p>Article</p>
</div>

CSS：

.deleteBtn {
    padding: 3vw !important;
    color: #e71f1f !important;
    width: 5vh;
    border: black;
}

.editBtn {
    padding: 3vw !important;
    color: #4ddd40 !important;
    width: 5vh;
    border: black;
}

【问题讨论】：

标签： css reactjs material-ui frontend

【解决方案1】：

如果不访问组件和上下文，很难进行故障排除，但此代码示例可能有助于为考虑的方向提供一些线索。

.deleteBtn {
  padding: 32px;
  color: #e71f1f;
  border: black;
}

.editBtn {
  padding: 32px;
  color: #4ddd40;
  border: black;
}

.inline {
  display: inline-block;
}

<div>
  <h3>Title</h3>
  <button className="editBtn" size="small">
   Edit
   <span>icon</span>
   </button>
  <button className="deleteBtn" size="small">
   Delete
   <span>icon</span>
   </button>
  <span>Article</span>
</div>

<br/>
<br/>

<div>
  <h3 class="inline">Title</h3>
  <button className="editBtn" size="small">
   Edit
   <span>icon</span>
   </button>
  <button className="deleteBtn" size="small">
   Delete
   <span>icon</span>
   </button>
  <span>Article</span>
</div>

【讨论】：

看起来没有办法将按钮放在同一行标题中，不是吗？
@MemphisMeng 看看新更新的演示。我认为 h3 默认情况下是显示块，它导致它跨越整个宽度。它可以通过进入 inline-block 来修复。

【解决方案2】：

看起来没有办法将按钮和标题放在同一行。相反，我使用标签来解决。

<div>
                                    <span>
                                        <strong>Title</strong>
                                        <IconButton className="editBtn" size="small">
                                            <EditIcon style={{ fontSize: 25 }}/>
                                        </IconButton>

                                        <IconButton className="deleteBtn" size="small">
                                            <DeleteIcon style={{ fontSize: 25 }}/>
                                        </IconButton>
                                    </span>
                                    
                                    <p>Article</p>
                                </div>

【讨论】：