Creating a layout where horizontal lines are aligned next to circle bullets using CSS

I have a CSS challenge that I'm trying to tackle:

https://i.sstatic.net/kmuky.png

The goal is to adjust the length of lines based on the number of circles present. For example, longer lines if there are fewer circles and shorter lines if there are more.

Below is the code I attempted to achieve this with:

HTML:

<div class="ng-modal-number-container">
   <div class="questionNumbers" ng-repeat="item in numberOfQuestions">
        <div class="questionNumberIcon">{{item}}</div><div class="questionNumberLine"></div>
   </div>
</div>

CSS:

.ng-modal-number-container {
    height:78px;
    background-color:#f5f5f5;
    width:auto;
    display:flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.questionNumbers {
    display:inline;
}

.questionNumberIcon {
    display:inline-block;
    width:45px;
    height:45px;
    border-radius:23px;
    font-size:18px;
    color:#000;
    line-height:45px;
    text-align:center;
    background:#fff;
    border:2px solid black;
 }

.questionNumberLine {
    border-top:1px solid black;
    display:inline-block;
}

Upon implementation, the outcome was not as expected:

https://i.sstatic.net/vn0ZU.png

I believe there might be an issue with my CSS, but I need assistance in identifying it. Any advice you can offer would be greatly appreciated.

Thank you.

UPDATE 1: Following z0mB13's suggestion, I adjusted the justification of my ng-modal-number-container element as below:

.ng-modal-number-container {
    height:78px;
    background-color:#f5f5f5;
    width:auto;
    display:flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

I also added width:100px to .questionNumberLine. The current appearance is shown here:

https://i.sstatic.net/pgx1j.png

A few more adjustments are needed concerning the line positions. Is it possible to make the line width dynamic based on the number of circles? Longer for fewer circles and vice versa. Appreciate any insights!

Thanks!

UPDATE 2 (Answer): Thanks to thepio's advice, the issue has been resolved. I am sharing my solution for others facing similar challenges in the future.

Many thanks to thepio!

HTML:

<div class="question-content-wrapper">
    <div class="ng-modal-number-container">
        <div class="questionNumbers" ng-repeat="item in numberOfQuestions">
            <div class="questionNumberIcon">{{item}}</div>
        </div>
    </div>
</div>

CSS:

.ng-modal-number-container {    
    margin-top: 22px;
    background-color:#f5f5f5;
    border-top: 1px solid black;
    width:auto;
    display:flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.questionNumbers {
    margin-top:-23px;
}

.questionNumberIcon {
    width:45px;
    height:45px;
    border-radius:50%;
    font-size:18px;
    color:#000;
    line-height:42px;
    text-align:center;
    background:#fff;
    border:1px solid black;
}

.question-content-wrapper {
    position:relative;
    background-color:#f5f5f5;
    height:78px;    
    padding-left:20px;
    padding-right:20px;
    padding-top:16px;
}

Current design status:

https://i.sstatic.net/4mMiM.png

htmlcss

Answer №1

If you're looking for a way to achieve a specific outcome, here's an example that might help guide you in the right direction. While I haven't integrated it into your current code, feel free to try implementing it on your own.

body {
  margin: 50px 20px;
}

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 2px solid black;
  padding-top: 15px;
  margin-top: 15px;
}

.container div {
  background-color: #ffffff;
  font-weight: bold;
  border: 2px solid black;
  margin-top: -40px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

EDIT:

For a version of your html structure on JSFiddle, click here.

Answer №2

This code handles multiple bullet points and different widths.

.questionNumbers {
  display: flex;
  align-items: center;
}
.questionNumberIcon {
  display: flex;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid black;
  align-items: center;
  justify-content: center;
}
.questionNumberLine {
  flex: 1 0 auto;
  height: 0;
  border-top: 1px solid black;
}
<main class="questionNumbers">
  <div class="questionNumberIcon">
    1
  </div>
  <div class="questionNumberLine"></div>
  <div class="questionNumberIcon">
    2
  </div>
  <div class="questionNumberLine"></div>
  <div class="questionNumberIcon">
    3
  </div>
  <div class="questionNumberLine"></div>
  <div class="questionNumberIcon">
    4
  </div>
</main>

To remove the line after the last element, use this CSS:

.questionNumberLine:last-of-type {
  display: none;
}

Answer №3

// These Shapes Will Dynamically Resize Based on Resolution//

.main-container{
 width:100%;
 height:200px;
 border:1px solid;
  padding-top:20px;
  padding-left:10px;
}
.circle{
  
  position:relative;
  display:inline-block;
  width:10%;
  height:50px;
  border:1px solid #333;
  border-radius:50%;
  text-align:center;
  line-height:45px;
  float:left;
 
}
.line{
 width:15%;
 border:1px solid red;
 float:left;
  margin-top:25px;
}
<div class="main-container">
  <div class="circle">1</div>
  <div class="line"></div>
  <div class="circle">2</div>
  <div class="line"></div>
  <div class="circle">3</div>
  <div class="line"></div>
  <div class="circle">4</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating a variable within an HTML document without the need for

Here's a snippet of HTML code I'm working with: <body> <table width="650"> <tr width="650"> <td width="650"> lots of text here </td> </tr> </table> </body> Is there a way I can use a variable or c ...

html

Bootstrap 4 Navigation Bar: Aligning dropdown menu to the right with overflow opening on the right side

Utilizing Bootstrap 4 for a simple navbar, I recently noticed that my right-aligned dropdown opens to the right, causing overflow and displaying the horizontal browser scrollbar. Here is the code for the navbar: <nav class="navbar navbar-expand-lg nav ...

htmltwitter-bootstrapbootstrap-4

What is the best way to combine height and min-height in order to ensure that a div always extends to the bottom and keeps

I've tried multiple suggestions without success so far. In my website, I have a main section with white background centered on the page. It stretches nicely to the bottom using flex. See image: https://i.sstatic.net/RmJ2o.png However, there's a ...

htmlcssheight

Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure: My HTML code is as follows: <header class="sticky z-10 top-10"> ...

htmlcsstailwind-css

Contrast two distinct Django models side by side

I've been grappling with a particular issue while working in Django templates for some time now. {% for item in list %} {% if item == {{another variable}} %} //Do Something {% endif %} {% endfor %} The list being iterated over and the second ...

pythonhtmldjangodjango-modelsdjango-templates

Editing the app.js file can cause it to malfunction and stop working

As I work on designing a webpage for a construction company using a template, I face an issue with the js file named app.js. Whenever I make edits to the script, the entire HTML page loses its responsiveness as if the js file was never included in the firs ...

javascriptjqueryhtmlcss

What challenges could arise from placing angular.js at the bottom of the body tag?

While browsing the official Angular guide on bootstrap, I came across this information: The recommendation is to place the script tag at the bottom of the page. This helps in improving app load time as it prevents HTML loading from being blocked by the ...

javascripthtmlangularjsperformancenonblocking

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...

htmlcssvue.jsvuejs2vuetify.js

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

javascriptjqueryhtmlcssattr

Is data-method not supported by Express?

After gaining expertise in Rails and HTML, I discovered how Rails can handle the "Delete" method using code like: <a rel="nofollow" data-method="delete" href="/logout">Log out</a> However, when transitioning to node and express, the web serve ...

ruby-on-railsnode.jshtmlexpress

Ways to align a DIV in the center of another DIV?

I am currently working on building a footer. My goal is to center the 4 divs in the footer, similar to the first paragraph or the 5 icons that are not rendering correctly. What would be the most effective approach to achieve this? Demo: http://jsfiddle.n ...

htmlcssfooter960.gs

Creating JavaScript Objects from HTML Form data with the help of serializeJSON

Struggling extracting HTML form data into the required JSON format for server communication. Despite following a guide, I can't get the output right. Managed to extract question keys and values, but labeling is tricky. Current Output: {"Question1":" ...

javascriptjqueryhtmljson

Tips for deleting a text node preceding a div element?

Here's the HTML code snippet I am currently working with: <div id="wrapper"> <div id="some-id"></div> "this is some texxt" <div id="some-id-2"></div> </div> Is there a way to eliminate the text using CSS? ...

htmlcss

Is there a way to customize the slicing of *ngFor in a component according to the components it is being injected into?

This code snippet represents a component that needs to be included in other components: <div class="row"> <div class="col-12 [...]" *ngFor="let course of courses"> <div class="card"> ...

javascripthtmlcssangulartypescript

Transmit a variety of information in a single Node.js request

I have a project where I need to retrieve data from multiple MongoDB tables and send it to the same landing page using a single GET request. The code snippet below shows how I am attempting to do this: as and bs represent different MongoDB database table ...

htmlnode.jsmongodbexpress

Issue with the Textualizer effect in HTML not functioning properly

Having trouble with the textualizer effect - my screen is just blank. I've tried copying it from this source: . Inserted it into both visual studio and notepad, but still no success! <html> <head> <title></title> <script sr ...

html

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

javascriptcssreactjs

The title tag appears to be malfunctioning as it is being shown as regular paragraph text on the live

After a year of programming websites, I encountered a strange issue for the first time. The text from my title tag is appearing live on my website, allowing me to click on it and highlight it. Here is the markup I used: <!doctype html> <html> ...

html

Form-group in a state of collapse

I am trying to figure out how to create a form-group row with multiple columns and collapse each column separately. The issue I'm facing is that the "div class="collapse" needs to be above the "div class="form group row," making it challenging to tag ...

htmlcssbootstrap-4

What might be causing the sticky footer to malfunction on the Samsung Galaxy Note 2's default browser?

I recently implemented a sticky footer design on my website, following the guidance of Ben Frain's book "Responsive Web Design with HTML5 and CSS3" (second edition). While it works flawlessly on most modern browsers, I encountered an issue with the Sa ...

androidhtmlcss