Question

我有2套链接

列表链接 - 垂直列出图像链接 - 也是垂直列出的

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

我该怎么做？我尝试过显示：内联;在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;
}

Answer 1

您可能希望为第一组链接使用不同的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 { ... }

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

1 个答案: