How to create an horizontal Line with dots over it


I am doing a school project where I have to create a horizontal line that has some dots over it.

I cannot use css as a separated file. The css needs to be inside the tag of HTML.

For example:

I already created the horizontal line, but I cannot create the dots over it.enter image description here


Answers:


You could include something like:

<div style="margin:50px;width:450px;height:25px;overflow:hidden;">
  <div style="width:550px;height:2px;background:black;position:relative;top:5px;">
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
  </div>
</div>

<div style="width:550px;height:2px;position:relative;left:45px;top:-55px;">
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">text</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">some other text</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">some more text</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">guess what! text!</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">text again</div>
  </div>

The dots have margins on their right to make the spacing and they are position relative to make sure they are on the line. A wrapper has been added to hide an extra part on the right of the black line which was needed due to the right margin on the last dot (otherwise the dot would have gone onto the next line).

You can also add text using the last part of the html code above.