.hero_text ul {
display: flex;
padding: 0;
list-style-type: none;
}
<div class="hero_text">
<p class="name">Kaixo! I'm Vic de Aranzeta. </p>
<p> A Design Anthropologist, User Experience Designer, Photographer, and Illustrator based in <s>sunny</s> foggy San Francisco.
I'm a Principal Product Designer by day - Outside of work you can find me snapping photos on my Fujifilm X-T30II, playing video games, or reading a book.
Check out my <u><a href="https://www.vicdearanzeta.com" class="link">design portfolio</a></u> to see more work. This website is to practice front-end web development.</p>
<ul>
<li><a href="https://www.linkedin.com/in/vicdearanzeta" target="_blank"><img src="Logo/mdi_linkedin.svg" width="32px" height="32px" class="linkedin" alt="linkedin"></a></li>
<li><a href="https://github.com/vdaranze" target="_blank"><img src="Logo/mdi_github.svg" width="32px" height="32px" class="github" alt="github"></a></li>
<li><a href="https://www.artstation.com/vicdearanzeta" target="_blank"><img src="Logo/mdi_artstation.svg" width="32px" height="32px" class="artstation" alt="artstation"></a></li>
</ul>
</div>
2条答案
按热度按时间mbskvtky1#
我分析了所有这些和其他代码,这些代码也存在于你的github帐户上。只有一行代码丢失了:
在html文件中,我只是在ul class ="social-media"中添加了一个类,然后我在上面应用了CSS。在CSS文件中添加的代码如下:
这将解决您的图标对齐问题。
如果你想让这行代码(写在下面)以图标为中心,你也可以添加这行代码。
qmb5sa222#
罪魁祸首是填充物。用户代理样式表(也称为浏览器默认样式表)包括
ul
的padding-inline-start: 40px
声明另外,不要忘记使用
list-style-type: none
删除列表标记