Блог

Главная - Вопросы по программированию - Рисование линии между логотипом и текстом

Рисование линии между логотипом и текстом

#html #css #bootstrap-5

Вопрос:

Я использую bootstrap 5, и мне нужно нарисовать тонкую линию после logo.png ниже. Между строкой и логотипом не должно быть пробелов, а между текстом и строкой по-прежнему не должно быть пробелов.

 <!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="images/logo.png" />
      </a>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
<nav>

Как я могу этого добиться?

Комментарии:

1. примечание: у вас опечатка в закрывающем теге навигации.

2. Линия, похожая на линию границы?

3. Строка типа <hr/> и не должно быть пробелов под изображением и пробелов над текстом

Ответ №1:

Используется margin: 0 для удаления пробелов между элементами

 h2, hr {
  margin: 0;
} 
 <nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="https://picsum.photos/100" />
      </a>
      <hr>
      <h2 class="my-auto font-size-medium">Zombie Testing</h2>
    </div>
  </div>
</nav>

Ответ №2:

просто добавьте a border-top к тексту, добавив border-top -class

 <!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="images/logo.png" />
      </a>
      <h2 class="my-auto font-size-medium border-top">Zombie Testing</h2>
    </div>
  </div>
</nav>

Комментарии:

1. Да, я просто подумал о том же. Или даже border-bottom на Div, который содержит изображение.

Ответ №3:

Это сделает :

 <!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-sm  d-flex py-4">
  <div class="d-flex align-items-center">
    <div>
      <a href="index" class="navbar-brand">
        <img src="images/logo.png" style="padding-bottom:0px;padding-top:0px;marin-bottom:0px;margin-top:0px;" />
      </a>
      <hr style="padding-bottom:0px;padding-top:0px;margin:0px;">
      <h2  style="padding-top:0px ;padding-bottom:0px ;margin-bottom:0px;margin-top:0px;">Zombie Testing</h2>
    </div>
  </div>
<nav>

проверьте это: https://jsfiddle.net/sugandhnihil/t6p4dubo/12/

Комментарии:

1. В нижней части изображения не должно быть пробелов. Изображение должно располагаться на строке, и не должно быть места поверх текста. Ваш показывает много пробелов

2. @Baba теперь он отображается правильно, я его отредактировал..

Метки: