I stylize round dots - they should lie evenly on the segment. Why in Chrome works like this:

enter image description here

And in FireFox works like this:

enter image description here

Sample styles:

 .da-dots{ width: 50%; margin: auto; align-items: center; flex-direction: row; position: relative; flex-wrap: wrap; display: flex; height: 100vh; padding-top: 20%; justify-content: space-between; z-index: 2000; } .da-dots { span{ width: 12px; height: 12px; border-radius: 50%; z-index: 1; position: relative; background: #e4b42d; cursor: pointer; box-shadow: 1px 1px 1px rgba(0,0,0,.1) inset,1px 1px 1px rgba(255,255,255,.1); } } .line_progress{ width: 100%; height: 2px; left: 0; position: absolute; background-color: #2c3e50; }

Closed due to the fact that it is necessary to reformulate the question so that it was possible to give an objectively correct answer by the participants of HamSter , user207618, fori1ton , rjhdby , Grundy 20 Oct '16 at 8:23 .

The question gives rise to endless debates and discussions based not on knowledge, but on opinions. To get an answer, rephrase your question so that it can be given an unambiguously correct answer, or delete the question altogether. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • eight
    For those who are in the tank - before posting questions, you should get acquainted with the rules of registration and the rules of good form. - user207618
  • five
    Just the opposite - you need to immediately show a mistake to a beginner so that there are no repetitions. And when a novice so brazenly snaps or, at least, does not admit a mistake, call on Zeus with a ban-hammer. Is the hint clear? - user207618
  • one
    We all love to joke, but this is not a joke. And society agrees, judging by the ratings of my comments. - user207618
  • one
    @Other, I apologize, Honorable Sir, I’ll familiarize myself with the rules now) - GoodNew5
  • one
    @Other, Go on mister, it's time to answer questions !!!)) - GoodNew5

1 answer 1

This is because of the way Firefox works with justify-content: space-between and position: absolute .

I recommend that you make a separate wrapper for points with display: flex and other flexbox properties.

 .da-dots { width: 50%; margin: auto; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; height: 100px; z-index: 2000; padding: 20px 0 0; } .da-dots__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .da-dots span { width: 12px; height: 12px; border-radius: 50%; z-index: 1; position: relative; background: #e4b42d; cursor: pointer; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.1); } .line_progress { width: 100%; height: 2px; left: 0; top: 25px; position: absolute; background-color: #000; } 
 <nav class="da-dots"> <div class="da-dots__inner"> <span></span> <span></span> <span></span> <span></span> </div> <div class="line_progress"></div> </nav>

Codepen

  • 2
    Whatever the point of the answer: links to third-party resources, including sandboxes, are not encouraged here, without the actual code. In addition, there is a built-in sandbox engine that allows you to embed small html / css / js snippets right in response. Answers like "all together with a snippet" are usually valued more - Duck Learns to Take Cover
  • @Sasha Omelchenko, do you know any other solution? The fact is that this markup is generated by the plugin, so making changes to it is quite problematic - GoodNew5
  • @GoodNew5 can, with the help of javascript, do the DOM manipulations you need, because you probably can’t do otherwise, because this is a feature of the browser. - Sasha Omelchenko