我在CSS中创建了一个浮动样本。但是,我对元素之间的顺序和空间有问题。这是结果:
灰点应该是绿点的右侧,甚至是绿点。
任何想法?谢谢,
这是我的代码示例:https://jsfiddle.net/dalenguyen/mfj78LL5/
.green-dot {
color: #20b08f;
}
.gray-dot {
color: grey;
}
.professional-skills .green-dot,
.professional-skills .gray-dot {
float: right;
font-size: 1.5rem;
}
<div class="professional-skills">
<h2>Professional Skills</h2>
<p>Web Design <span class="green-dot">● ● ● ● ●</span></p>
<p>Design <span class="green-dot">● ● ●</span><span class="gray-dot">● ●</span></p>
</div>
</div>
使用float:right;
时,最远的元素始终是HTML代码中之前存在的元素。如果您希望灰点适合您的绿点,则必须先在HTML中插入它们。
此外,如前所述,您可能希望将您的点分成单独的容器,这样您就可以完全控制间距(而不是在点之间使用空格)。请参阅Mhd.Jarkas的回答。
希望能帮助到你!
不均匀的间距是由float: right;
引起的,在您的示例中,第二行中有2个跨度,而第一行中只有1个跨度,浮动会删除标记之间的空白渲染。
您可以将每个点包装成一个跨度,这将解决间距问题,并了解浮动引起的逆序。
.green-dot {
color: #20b08f;
}
.gray-dot {
color: gray;
}
.professional-skills .green-dot,
.professional-skills .gray-dot {
float: right;
font-size: 1.5rem;
margin-left: 5px;
margin-top: -5px;
}
<div class="professional-skills">
<h2>Professional Skills</h2>
<p>
Web Design
<span class="green-dot">●</span>
<span class="green-dot">●</span>
<span class="green-dot">●</span>
<span class="green-dot">●</span>
<span class="green-dot">●</span>
</p>
<p>
Design
<span class="green-dot">●</span>
<span class="green-dot">●</span>
<span class="green-dot">●</span>
<span class="gray-dot">●</span>
<span class="gray-dot">●</span>
</p>
</div>
试试这个
.green-dot,.green-dot-1 {
color: #20b08f;
}
.gray-dot,.gray-dot-1 {
color: grey;
}
.professional-skills .green-dot, .professional-skills .gray-dot{
float: right;
font-size: 1.5rem;
}
#dots{
font-size: 1.5rem;
float : right;
}
#abc{
float: left;
}
#clear {
clear: both;
}
.green-dot-1{
padding-right: 5px;
}
<div class="professional-skills">
<h2>Professional Skills</h2>
<p>Web Design <span class="green-dot">● ● ● ● ●</span></p>
<p id="abc">Design </p>
<div id="dots">
<span class="green-dot-1">● ● ●</span><span class="gray-dot-1">● ●</span>
</div>
<div id="clear"></div>
</div>
</div>