2

我在 CSS 中创建了一个 float 示例。但是，我对元素之间的顺序和空间有疑问。这是结果：

在此处输入图像描述

灰点应位于绿点的右侧，甚至位于绿点的右侧。

任何想法？谢谢，

这是我的代码示例：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>

4

5 回答 5

4

CSSfloat属性从未设计用于构建布局。

它是为在图像周围环绕文本而设计的。

因为 CSS 没有提供更好的布局系统，浮动（和表格、内联块和绝对定位）已被用作 hack 解决方法。

但是现在 CSS3 flex和grid模块具有广泛的浏览器支持，并且它们是专门为构建布局而设计的，您应该考虑使用它们。

section {
  display: flex;
}

section > * {
  margin: 0;
  align-self: center;  /* 1 */
}

section > p {
  margin-right: auto;  /* 2 */
}

.green-dot {
  color: #20b08f;
  font-size: 1.5rem;
}

.gray-dot {
  color: grey;
  font-size: 1.5rem;
}
<article class="professional-skills">

  <h2>Professional Skills</h2>

  <section>
    <p>Web Design</p>
    <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>
  </section>

  <section>
    <p>Design</p>
    <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>
  </section>

</article>

笔记：

  1. 在此处了解该align-self物业：

  2. 在此处了解auto边距：

于 2017-05-01T13:55:11.347 回答
1

您可以更新以下内容：

.professional-skills .green-dot, .professional-skills .gray-dot
{
  float: right;
  font-size: 1.5rem;
  padding-right:5px;
}

它会起作用，但最好将每个圆圈保持在一个单独的 DIV 中。

于 2017-05-01T13:50:27.760 回答
1

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

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

希望能帮助到你！

于 2017-05-01T13:54:13.053 回答
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>

于 2017-05-01T14:02:38.043 回答
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>

于 2017-05-01T13:54:30.983 回答