Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

(HTML+CSS) There is a Dot before my Instagram Logo

Im making my own Website and i inserted a picture of the Instagram Logo as a link to get to my Instagram, but on the Live server is the Instagram logo fully funktional BUT there is a Dot before the logo...

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I actually didnt wanted to anwser this question as it is already anwsered in the comments. However as a "wrong" anwser and an insufficient anwser was given, I will anwser it to have a correct solution.

The issue with your code: The dot you having is the list-style bullet you getting by having this line of code: <li class="ContactLink" style="margin-left: 600px;">. However this line of HTML code is invalid for 2 reasons. First you miss the closing tag </li>. Last but not least, a list must always be wrapped inside an ordered <ol> ... </ol> or undeorder list <ul> ... </ul>.

How to fix it: First close your list tag by adding </li>. Then wrap the entire list inside an unordered list with <ul> ... </ul>. Give the class name to the ul. Use list-style-type: none; to remove the 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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...