Блог

Главная - Вопросы по программированию - (HTML CSS) Перед моим логотипом Instagram стоит точка

(HTML CSS) Перед моим логотипом Instagram стоит точка

#html #css

#HTML #css — код

Вопрос:

Я создаю свой собственный веб-сайт, и я вставил изображение логотипа Instagram в качестве ссылки, чтобы перейти в мой Instagram, но на живом сервере логотип Instagram полностью функциональный, НО перед логотипом есть точка…

 <div class="Contact">
  <h1>
    How can i get in Touch with you?
  </h1>
  <p>
    You can Contact me on Instagram,Discord or via Email!
  </p>
  <li class="ContactLink" style="margin-left: 600px;">
    <a href="https://www.instagram.com/dennisprivate04/"><img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px"></a>
</div>

Логотип с точкой

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

1. это связано с тем, что бедный одинокий <li class="ContactLink" style="margin-left: 600px;"> 🙂 Почему вы используете li в одиночку?

2. Я сейчас так тупо упал; D Большое вам спасибо, это было такое простое решение, но мой мозг не смог с этим справиться

3. это <li> недопустимая HTML-структура. он должен быть обернут либо ul знаком или ol . Затем маркер можно удалить, используя list-style-type: none;

Ответ №1:

На самом деле я не хотел отвечать на этот вопрос, поскольку он уже задан в комментариях. Однако, поскольку был дан «неправильный» и недостаточный ответ, я отвечу на него, чтобы найти правильное решение.

Проблема с вашим кодом: точка, которую вы имеете list-style bullet , — это то, что вы получаете, имея эту строку кода : <li class="ContactLink" style="margin-left: 600px;"> . Однако эта строка HTML-кода недопустима по двум причинам. Сначала вы пропускаете закрывающий тег </li> . И последнее, но не менее важное: список всегда должен быть заключен в упорядоченный <ol> ... </ol> или неупорядоченный список <ul> ... </ul> .

Как это исправить: сначала закройте тег списка, добавив </li> . Затем оберните весь список внутри неупорядоченного списка с <ul> ... </ul> помощью . Дайте имя класса ul . Используется list-style-type: none; для удаления list-style bullet .

 .ContactLink {
  text-align: right;
  list-style-type: none;
} 
 <div class="Contact">
  <h1>
    How can i get in Touch with you?
  </h1>
  <p>
    You can Contact me on Instagram,Discord or via Email!
  </p>
  <ul class="ContactLink">
    <li>
      <a href="https://www.instagram.com/dennisprivate04/">
        <img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px">
      </a>
    </li>
  </ul>
</div>

Ответ №2:

Точка вызвана <li> тегом. Вы можете просто удалить его и сохранить оставшийся логотип вашего instagram.

     <a href="https://www.instagram.com/dennisprivate04/"><img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px" style= "text-decoration: none;"></a>

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

1. Привет и добро пожаловать в SO. Несмотря на то, что ваш anwser может решить проблему, в нем отсутствует контент. Ответчик всегда должен содержать достаточно информации о том, в чем проблема и как вы ее решили. Ответчик с кодовой строкой не может объяснить проблему и помочь воспроизвести решение.

Метки: