gpt4 book ai didi

html - 我的 div 中的链接需要不同的属性

转载 作者:太空宇宙 更新时间:2023-11-04 07:44:20 25 4
gpt4 key购买 nike

我有两套链接

列表链接 - 垂直列出图片链接 - 也垂直列出

我需要在底部水平列出图片链接

我该怎么做?我试过显示:内联;在 css 中,但我需要的是覆盖列表链接中列出的属性的东西

我该怎么做?

代码如下

HTML

<body>

<div id="sidebar" class= "container text-center col-lg-3">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="experience.html">Experience<a/></li>
<li><a href="contact.html">Contact</a></li>
</ul>

<div style="margin-left:0%">
<a href="https://github.com/evie4411" target="_blank"><img src="./images/iconmonstr-github-1.png"></a>
<a href="https://github.com/evie4411" target="_blank"><img src="./images/iconmonstr-linkedin-4.png"></a>
<a href="https://github.com/evie4411" target="_blank"><img src="./images/iconmonstr-twitter-4.png"></a>
</div>

CSS

a, li{
font-size: 40px;
margin: auto;
font-family: 'Lato', sans-serif;
font-weight: 100;
color: #ffffff;
display: table;
}


img {
max-width: 25px;
max-height: 25px;
display: inline;
position: fixed;
margin-left: 0px;
margin-right: 0px;
display: inline-block;
}

最佳答案

您可能想为第一组链接使用不同的 CSS 选择器,因此它不会影响第二组图像链接。

li,
li a {
font-size: 40px;
margin: auto;
font-family: 'Lato', sans-serif;
font-weight: 100;
color: #ffffff;
display: table;
}

上面的变化li, li a使 CSS 目标仅为 a li 的后代链接列表项。

因为第二组链接不是 li 的后代列表项,它们将不会应用上述样式。

或者,您可能希望将 CSS 类添加到 ul (即 <ul class="top-links">...</ul> )和一个与 div 不同的围绕图像链接(即 <div class="image-links">...</div> )。这将允许以更容易理解且不太可能重叠的方式在您的 CSS 中定位它们:

li, 
.top-links a { ... }

.image-links img { ... }

关于html - 我的 div 中的链接需要不同的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48273249/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com