时间戳

首页 > 解决方案 > h3 和锚定内联块（在同一行）

html - h3 和锚定内联块（在同一行）

问题描述

我想在与我的产品标题相同的行上有一个编辑图标。我以为我可以使用span或只是将这两个元素都设置为display: inline-block;但我无法让它工作。

.model-title {
  display: inline-block;
}

.model-edit {
  display: inline-block;
}
<h3 class="model-title">Product Title</h3>
<a href="#"><i class="model-edit fa fa-pencil"></i></a>

标签： htmlcss

解决方案

要将2 个元素放在同一行上，只需使用display: inline-block;属性，如果要使用编辑图标，则可以使用引导图标：源。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .model-title {
	  display: inline-block;
        }
    </style>
  </head>
  <body>
    <div class="container">  
      	<h3 class="model-title">Product Title</h3>
        <a href="#">
          <span class="glyphicon glyphicon-pencil"></span>
        </a>
      </p> 
    </div>
  </body>
</html>

推荐阅读