图标不与文本内联

Question

这是我的HTML＆amp; CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

最终看起来像这样：

＆＃34;添加＆＃34;图标应该放在＆＃34;门＆＃34;旁边。有什么想法吗？

Answer 1

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

有很多方法可以并排放置内容，很多方法取决于您的上下文和您尝试实现的用户界面。

您可以尝试为这两个元素设置 display: inline-block; 或 float:left ，以使它们保持在同一行

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

一种可能的方法是将图标放在h1标记内 您可以为悬停功能添加可见性以显示隐藏图像

function pencil_display(event,elem){
  document.getElementById("add").style.display = 'none';
  document.getElementById("pencil").style.display = 'table-cell';
}

function pencil_out(event,elem){
  document.getElementById("add").style.display = 'table-cell';
  document.getElementById("pencil").style.display = 'none';
}

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

.pencil_icon {
  display: inline;
  height: 100%;
  display: none;
  vertical-align: middle;
}

.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"><img id="pencil" src="https://www.materialui.co/materialIcons/content/create_grey_108x108.png" alt="Pencil" class="pencil_icon"/>
    <img id="add" src="https://www.materialui.co/materialIcons/content/add_circle_grey_192x192.png" alt="add" id="addicon" class="title_elements">Doors</h1>
    
  </div>
</div>

Answer 3

＆＃13;

＆＃13;

.category_title {
  margin-top: 30px;
  margin-left: 40px;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
}

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

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

#addicon {
  height: 25px;
  width: 25px;
}

＆＃13;

<div>
  <div class="category_title" 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">
  </div>
  <img src="https://www.materialui.co/materialIcons/content/add_circle_grey_192x192.png" alt="add" id="addicon" class="title_elements">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我最后为添加图标创建了一个类并添加了这个：

<?php>
    //set counter to 1
    $counter = 1;
    <thead>
    <tr>
    th>No.</th>
    <th>REGISTRATION #</th>
    <th>SURNAME<`enter code here`/th>
    </tr>
    <tr>
    <td><?php echo $counter; ?></td>
    <td><?php echo htmlentities($class['registration']); ?></td>
    <td><?php echo htmlentities($class['sirname']); ?></td>
    </tr>
    $counter++;
    </tbody>

?>