html - Distribute element Horizontally equal using CSS -


I have eleven dots using CSS, horizontally Organize. My question is, how can I distribute / evenly distribute the difference between the content of the width of the browser (evenly SPAN ) ? Can I do some math in CSS? Here is my sample code:

HTML

  & lt; Span id = "first" class = "border-change circle" & gt; & Lt; / Span & gt; & Lt; Span id = "second" class = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "third" square = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "fourth" square = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "five" square = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "six" class = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "seven" class = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "eight" class = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "nine" class = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "ten" class = "circle" & gt; & Lt; / Span & gt; & Lt; Span id = "eleven" class = "circle" & gt; & Lt; / Span & gt;   

CSS

  span.circle {height: 20px; Width: 20px; Limit-Radius: 100%; Border: 1 px solid # beef; Background: #ddd; Status: Completed; Left: 0; Top: 45px; Cursor: indicator; Transition: All 0.4 s easily; } #second {left: 190px; } #third {left: 380px; } #th {left: 570px; } #five {left: 760px; } #six {left: 950px; } #seven {left: 1140px; } # Oats {left: 1330px; } # Nan {left: 1520px; } #invent {left: 1710px; } #eleven {left: 1900px; }    

Using Flexbox, you can do something like this:

. Parent {display: flex; Appropriate Material: Space-Between; } Span.circle {altitude: 20px; Width: 20px; Limit-Radius: 100%; Border: 1 px solid # beef; Background: #ddd; Cursor: indicator; Transition: All 0.4 s easily; }

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -