html - 图标未与文本内联

Question

这是我的 HTML 和 CSS:

.category_title {
  margin-top: 30px;
  margin-left: 40px;
  margin-bottom: 20px;
  display: table;
  height: 30px;
  position: relative;
  top: 10px;
  left: 0px;
}

.pencil_icon {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0px;
  display: table;
  right: 0px;
  visibility: hidden;
}

.title_elements {
  display: inline;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

<div class="category_title">
  <div onmouseover="pencil_display(event,this);" onmouseout="pencil_out(event,this);">
    <h1 id="title" class="title_elements">Doors</h1>
    <img src="Iconos/pencil.png" alt="Pencil" class="pencil_icon">
    <img src="https://www.materialui.co/materialIcons/content/add_circle_grey_192x192.png" alt="add" id="addicon" class="title_elements">
  </div>
</div>

最终看起来像这样:

“添加”图标应该放在“门”旁边。有什么想法吗？

Answer 1

<h1>是一个 block 级元素，因此无论 h1 的宽度有多大，文档流中的任何后续内容都将位于其下方。占用。

有很多并排放置内容的方法，其中许多方法取决于您的上下文和您要实现的 UI。

您可以尝试设置 display: inline-block; 或 float:left 让两个元素保持在同一行

.category_title {
  margin-top: 30px;
  margin-left: 40px;
  margin-bottom: 20px;
  display: table;
  height: 30px;
  position: relative;
  top: 10px;
  left: 0px;
}

.pencil_icon {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0px;
  display: table;
  right: 0px;
  visibility: hidden;
}

.title_elements {
  display: inline;

  height: 100%;
  display: table-cell;
  vertical-align: middle;
  display: inline-block
}

<div class="category_title">
  <div onmouseover="pencil_display(event,this);" onmouseout="pencil_out(event,this);">
    <h1 id="title" class="title_elements">Doors</h1>
    <img src="Iconos/pencil.png" alt="Pencil" class="pencil_icon">
    <img src="https://www.materialui.co/materialIcons/content/add_circle_grey_192x192.png" alt="add" id="addicon" class="title_elements">
  </div>
</div>