What is the best way to design a group of radio buttons with corresponding labels at the top

I'm looking to create a structure like this in HTML:

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

Does anyone know how I can achieve this layout so that the labels are aligned properly with the radio buttons? My main challenge is getting the horizontal labels above each radio button.

I would appreciate a solution using only HTML and CSS.

Here's my attempt, where I'm using Semantic UI React:

<div class="row question-row">
                        <div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
                            Statement three</p></div>
                        <div class="five wide column">
                            <form class="ui form radio-question"><label class="horizontal-label">High</label><label
                                class="horizontal-label">Medium</label><label
                                class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="1"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="2"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="3"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="4"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="5"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="6"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="7"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="8"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="9"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="10"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="11"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="12"><label></label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

CSS:

.ui {

  .sub-section-grid {

    .question-row {
      margin-bottom: 30px;
    }
    .radio-statements {
      top: 20px;
    }

    .horizontal-label {
      margin-right: 20px;
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.57;
      letter-spacing: normal;
      text-align: left;
      color: #868686;
    }

    .help-text {
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.67;
      letter-spacing: normal;
      text-align: left;
      color: rgba(139, 142, 142, 0.7);
    }

    .info
    {
      &.circle {
        margin-bottom: 20px;
        margin-top: -40px;
      }
    }
  }
}
htmlcssradio-buttonsemantic-ui-react

Answer №1

Have you considered utilizing traditional HTML tables for this task?

td {
  width:20%;
}
<table>
  <thead>
    <tr>
      <td></td>
      <td>High</td>
      <td>Medium</td>
      <td>Low</td>
      <td>N/A</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Statement one</td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
    </tr>
        <tr>
      <td>Statement two</td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
    </tr>
        <tr>
      <td>Statement three</td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
    </tr>
  </tbody>
</table>

Answer №2

Here is a functional example with a CSS solution.

.inline{
  display: flex; 
  }
  .question-row {
    display: flex;
  }
  .field{
    padding-top: 8px;
    padding-left: 14px;
 
  }
  .horizontal-label{
     padding-left: 4px;
  }
<div class="row question-row">
                        <div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
                            Statement three</p></div>
                        <div class="five wide column">
                            <form class="ui form radio-question"><label class="horizontal-label">High</label><label
                                class="horizontal-label">Medium</label><label
                                class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="1"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="2"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="3"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="4"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="5"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="6"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="7"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="8"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="9"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="10"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="11"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="12"><label></label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </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

Tips on adjusting the label on a datetime-local button

While using mobile browsers, I noticed that the datetime local feature includes three buttons. One of these buttons is called the Set button, but I would like to change its name to Ok. Is there a way to do this? I tried looking for solutions but couldn&apo ...

javascripthtml

Changing the height of one Div based on another Div's height

I currently have a display of four divs positioned side by side. I am seeking a solution to ensure that the height of each div remains consistent, and should adjust accordingly if one of them increases in size due to added text content. For reference, ple ...

javascriptjqueryhtmlcss

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...

cssstorybook

Starting the animation only when the slide is visible

Struggling to add animations dynamically as a HTML/CSS developer who avoids JS but uses jQuery occasionally? Sound familiar? Well, I have. Recently, I managed to create a CSS-3 animation for the images in a Bootstrap carousel. Check out the code below: ...

htmlcsstwitter-bootstrap

Embracing the Power of Sass

I have recently revamped my portfolio website on Github Pages and now I am looking to integrate Sass for my upcoming Portfolio 2.0 project. Although I have worked with Sass before, setting it up from scratch is new to me. Currently, I have installed Sass ...

csssassgithub-pages

My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

I'm struggling to insert my contact form code into the contact tab without it interfering with the tab bar. I want the form to appear in the middle of the page when the tab is clicked. I've tried various placements for the code but none seem to ...

htmlcss

What is the best way to send multiple values to a PHP function through an AJAX request?

I wrote the following code snippet: var name= "theName"; var surname= $('#surname').val(); $.ajax({ url: 'SaveEdit.php', type: 'post', data: { "callFunc1": whichOne}, success: funct ...

phphtmlajax

How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

I am currently working on creating a div that contains some information, similar to the layout used on the Coinbase website. However, I am encountering issues with styling as I want this div to be responsive - horizontally aligned on larger devices and ver ...

htmlcss

Retrieve data from an HTML form within an Angular 2 ag-grid component

I'm facing a challenge with incorporating form values from a modal into an ag-grid array in my HTML file. I'm unsure of the process to achieve this. Below is an excerpt from my file.html: <template #addTrainContent let-c="close" let-d="dismi ...

htmlangulartypescriptag-grid

Issues with Monospace Google Fonts on JSFiddle are preventing them from displaying correctly

It's strange how monospace fonts from Google Fonts don't display properly on JSFiddle. Only sans-serif and serif fonts seem to be functioning correctly. ...

cssjsfiddlegoogle-font-api

Show User-Uploaded Image on Redirected Webpage with Flask and html

My goal is to develop a webpage where users can submit an image, and upon submission, they are redirected to a new page displaying the rendered image. I have referenced the code from How to pass uploaded image to template.html in Flask for guidance, but un ...

pythonhtmlformsflaskrequest

Cannot add padding to the DIV element

Here is some HTML and CSS code that I've provided. .x{ border-bottom: 1px solid #000; } .y { border-bottom: 1px solid #000; } .z li{ display: inline; padding-top: 50px; } <div class="x"> <br> <br> <b ...

htmlcss

Creating Beautiful Math Equations with LaTeX in EaselJS

Can MathJAX or a similar tool be integrated into an EaselJS DisplayObject? I am looking for alternative options. I want to render text like $$ 5 + 3 - 3 = 5 $$ on a canvas that serves as an EaselJS stage. Ideally, I hope to achieve this using the Text Cl ...

javascripthtmllatexeaseljsmathjax

Enhancing the readability of modals with Angular Dialog Service

I have been utilizing the Angular Dialog Service to create popup forms on my website. The source code for this service can be accessed here: https://github.com/m-e-conroy/angular-dialog-service/blob/master/README.md However, I am experiencing an issue wit ...

javascripthtmlangularjsmodal-dialog

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

javascripthtmljquerycss

Troubleshooting a problem with a CSS dropdown menu

For the past couple of hours, I've been trying to troubleshoot the issue with the fly-out menu on the homepage of this website. When hovering over the capabilities link, the fly-out works correctly but the main background doesn't stretch to fit ...

css

Various inline SVG elements not rendering properly on HTML page

I have converted several PDF files to SVG using a tool called pdftocairo. These SVG files can be viewed in a browser without any issues. You can find one of the SVG files here. However, when I try to embed multiple different SVG files into the same HTML ...

htmlsvg

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...

javascripthtmljquerycss

Incorporating Microsoft's Emotion API into an HTML website

Currently, I am attempting to develop a HTML webpage that can detect emotions from images submitted by the user. By referring to Microsoft's documentation, I have produced the following HTML file: <!DOCTYPE html> <html> <head> & ...

javascripthtmlajaxwindowsazure-cognitive-services

Invoking a function within an HTML file does not result in triggering an alert message

Hello everyone, thank you for taking the time to look at this. I'm attempting to execute a javascript function when I click on the update button. Here is the javascript code: var text2Array = function() { // This function takes the value from the t ...

javascripthtml