h3 и встроенный блок привязки (на одной строке) - PullRequest
Новая
       0

h3 и встроенный блок привязки (на одной строке)

1 голос
/ 18 февраля 2020

Я хочу, чтобы значок редактирования находился в той же строке, что и название моего продукта. Я думал, что смогу использовать 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>

1 Ответ

0 голосов
/ 18 февраля 2020

Для размещения 2 элементов в одной строке просто используйте свойство display: inline-block;, а если вы хотите использовать значок редактирования, тогда вы можете использовать значок bootstrap: source . 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...