Float权限在CSS中不起作用

问题描述 投票:2回答:5

我在CSS中创建了一个浮动样本。但是,我对元素之间的顺序和空间有问题。这是结果:

enter image description here

灰点应该是绿点的右侧,甚至是绿点。

任何想法?谢谢,

这是我的代码示例: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">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p>
  <p>Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot">&#x25cf; &#x25cf;</span></p>
</div>
</div>
html css flexbox css-float css-grid
5个回答
1
投票

使用float:right;时,最远的元素始终是HTML代码中之前存在的元素。如果您希望灰点适合您的绿点,则必须先在HTML中插入它们。

此外,如前所述,您可能希望将您的点分成单独的容器,这样您就可以完全控制间距(而不是在点之间使用空格)。请参阅Mhd.Jarkas的回答。

希望能帮助到你!


1
投票

不均匀的间距是由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">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
  </p>
  <p>
    Design
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="gray-dot">&#x25cf;</span>
    <span class="gray-dot">&#x25cf;</span>
  </p>
</div>

0
投票

试试这个

.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">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p>
  <p id="abc">Design </p>
<div id="dots">  
  <span class="green-dot-1">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot-1">&#x25cf; &#x25cf;</span>
  </div>
  <div id="clear"></div>
</div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.