我在 html 文件中创建了 5 个超链接,但我想在它们之间留出空间 我该怎么做,有点帮助!
谢谢!
<body>
<div class="back">
<div class="image">
<img src="comp.jpg" alt="background image" style="width:100%; height:100%">
</div>
<h3 class="name" style="color: #d9d9d9">
ASHUTOSH KUMAR SINGH
</h3>
<div class="link" align="middle">
<a href="about.html" style="color: white">About</a>
<a href="contact.html" style="color: white">Contact</a>
<a href="skill.html" style="color: white">Skills</a>
<a href="mywork.html" style="color: white">My Work</a>
<a href="blog" style="color: white">Blog</a>
</div>
<div class="myimg" align="middle">
<div class="circle" align="middle">
</div>
<img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>
</div>
</div>
这是我的CSS文件:在下面的代码中我创建了一类链接,其中我 级联它。我想在它们之间留出一些相等的空间,这样看起来就很整齐。
html,body{
margin:0;
}
div.link{
font-size: 25px;
position: fixed;
/*text-space: 100;*/
margin-top:500px;
margin-left: 250px;
}
.back{
height: 100%;
width: 100%;
margin: 0;
}
.image{
position: fixed;
}
.myimg{
position: absolute;
margin-top:100px;
margin-left: 500px;
}
.myimage{
border: 2px solid rgba(114, 114, 114, 0.55);
border-radius: 100%;
}
.circle{
border: 2px ;
border-radius: 100%;
background-color: black;
}
.name{
position: fixed;
margin-top:420px;
margin-left: 530px;
}
最佳答案
我认为您正在寻找的最简单的方法是:
.link a {margin-right:10px;}
唯一的问题是,所有链接元素现在从第一个到最后一个都具有右边距。 如果您想排除最后一个没有边距的元素,请添加附加内容:
.link a:last-child{margin-right:0px;}
记住,在CSS中你可以完美地嵌套CSS选择器
html body .back .link a{some-css-rule}
顺便说一句,选择器越具体,浏览器分析它们时就越重要)
<div class="some_class" id="some_id" style="color:grey;">sometext</div>
#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}
颜色将为灰色,因为内联选择器比具有 ID 的选择器具有更大的权重,后者比具有类的选择器具有更大的权重,后者比具有 ID 的选择器具有更大的权重html 容器。 这称为 CSS 特异性 CSS-specifity calculator by keegan.st
关于html - 如何处理CSS中的超链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42189990/