フロート右がCSSで正しく機能しない

Question

CSSでフロートのサンプルを作成しました。しかし、私は要素間の順序とスペースに問題があります。これが結果です：

グレードットがのも緑のドットに1つの右側でなければなりません。

あなたは、次の更新ができ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>

Answer 1

floatプロパティは、建物のレイアウトのために設計されていませんでしたCSSを試してみてください。

画像の周りにテキストを囲むように設計されています。

CSSではレイアウトシステムが改善されていないため、ハックの回避策として浮動小数点（およびテーブル、インラインブロック、絶対配置）が使用されていました。

しかし、CSS3 flexとgridのモジュールはwide browser supportであり、それらはレイアウトを構築するために特別に設計されているため、それらの使用を検討する必要があります。

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プロパティについて学ぶ：

   • How does flex-wrap work with align-self, align-items and align-content?

2. ここについてauto余白を学ぶ：

   • In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

：おかげで、

これは私のコードサンプルで

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

をし、それが動作しますが、それはそれぞれの円を維持する方が良いでしょう純粋なDIVで

Answer 3

float:right;を使用する場合、最も離れている要素は、常にHTMLコード内に存在する要素です。灰色の点が緑色の点の右にくるようにするには、最初にHTMLに点を挿入する必要があります。

また、前述したように、ドットを別々のコンテナに分割すると、ドット間のスペースを使用する代わりに、スペースを完全に制御できます。 Mhd.Jarkasの答えを参照してください。

希望すると助かります！

Answer 4

この

.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>

Answer 5

不均一間隔はfloat: right;によって引き起こされる、あなたの例では2列目の2つのスパンがあるだけで1スパンに比較最初の行では、浮動小数点数はタグ間の空白のレンダリングを削除します。

各ドットを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>