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:

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

What is the best way to make a multi-column image responsive in amp-html code?

Here is the concept I was referring to, you can see it in action by following this link <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-bo ...

htmlcssamp-htmlresponsive-images

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'elipsis' }) export class ElipsisPipe implements PipeTransform { transform(text, length, clamp) { text = text || ''; clamp = clamp || '...& ...

javascripthtmlangulartypescriptprimeng

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

javascriptcssreactjsmaterial-uicss-animations

Exploring the bond between siblings from a child's perspective

Is there a way to apply styling to the .item class when the corresponding input field is checked? <input> <span class="item"> I have discovered that I can achieve this using input:checked ~ .item {} However, my challenge lies in obtaining th ...

csscss-selectors

Harvesting data from an HTML document using BeautifulSoup and Python

I am currently working on extracting text from an HTML file. The HTML file has the following structure: <li class="toclevel-1 tocsection-1"> <a href="#Baden-Württemberg"><span class="tocnumber">1</span> <span class= ...

pythonhtmlbeautifulsoup

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

javascriptjqueryhtmlcssheight

The HTML generated by Angular does not display as anticipated

When converting the angular-generated HTML to a PDF using jspdf, it does not take into consideration angular classes like ng-hide. This means that elements styled with the ng-hide class will still appear in the generated PDF. To see an example, visit the ...

htmlangularjspdfmarkupjspdf

Learn how to use CSS flexbox to easily vertically center items within a container with a full-height background

I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height. HTML: <div class="feature-content"> <div class="feature-visual"> <div class="embed-container"> ...

cssflexbox

Ways to efficiently convert HTML form data into JSON format

Currently, I am in the process of developing an ecommerce platform. As part of this project, I have created a billing form to gather essential information such as email addresses and physical addresses from users. The intention behind collecting this data ...

htmlcssdjangowebe-commerce

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

Looking to reposition the control buttons above the slider in easySlider 1.7?

I am thoroughly enjoying the easySlider 1.7 and found it incredibly simple to implement. The only modification I wish to make is to relocate the next and previous buttons above the slider instead of below it. Does anyone have any suggestions on how to achi ...

jqueryhtmlcss

Every time I try to access my website, all I see is the WordPress installation process page

After initially hosting a WordPress website, I made the decision to switch over to SPIP. However, when attempting to access the site on my laptop, it continues to bring up the WordPress installation process. Interestingly enough, the website appears to lo ...

htmlcsswordpresscontent-management-systemspip

How can recursive data be displayed in a template?

I am working with a model in Django that has a ForeignKey pointing to itself, and I need to display all the data from the database using lists and sublists: Below is my model definition: class Place(models.Model) name = models.CharField(max_length=1 ...

pythonhtmlcssdjangodjango-models

Utilize CSS to exclusively filter through items

Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked. HTML: <!-- Header links --> <a href="#" class="all" tabin ...

htmlcssselectfiltertabindex

Switching between different views in Angular UI-router by selecting one UI-view over another

On my page, I have set up 2 ui-views. The top view contains a form and some controls, while the bottom view initially displays a few tables but should change based on the user's actions in the top view. I chose to keep this initial setup within a sin ...

htmlangularjsangular-ui-router

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...

javascripthtmlangularjsfiltertype-conversion

Adjust the color of the text for the items in the drop-down field on the WooCommerce

https://i.stack.imgur.com/CHJUz.png It appears that the font color on my main website is white. However, on the WooCommerce Checkout Page, all drop down fields' items are also displayed in white, making it difficult for users to see the options witho ...

htmlcsswordpresswoocommercecss-selectors

Align the text to the center beneath the image using Jquery's append function

I am looking to showcase a collection of fruits and vegetables through images, with the names displayed centered underneath each image. Additionally, I want to implement jQuery append functionality so that the names only appear when a specific button is cl ...

htmljquerycss

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Hello there, I was wondering if it's feasible to end the session and log out when I close my tab. I'd appreciate it if you could confirm whether this feature has been implemented on your end. Thank you, Manish ...

phpjavascripthtml