Ways to align radio buttons vertically

I am currently working with three radio buttons that are initially aligned horizontally, but I would like to change their alignment to be vertical instead. What is the best way to achieve this?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <h1>Custom Radio Button</h1>
  <label for="myRadioId" class = "radio">
    <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input">
    Mercedes Benz
  </label>
  <label for="myRadioId2" class = "radio">
    <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input">
    BMW
  </label>
  <label for="myRadioId3" class = "radio">
    <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input">
    Volkswagen
  </label>
</body>
</html>

htmlcss

Answer №1

Modify inline-flex to use flex

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <h1>Custom Radio Button</h1>
  <label for="myRadioId" class = "radio">
    <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input">
    Mercedes Benz
  </label>
  <label for="myRadioId2" class = "radio">
    <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input">
    BMW
  </label>
  <label for="myRadioId3" class = "radio">
    <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input">
    Volkswagen
  </label>
</body>
</html>

Answer №2

Try using display: table; instead of display: inline-flex; for styling in CSS.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.radio {
display: table;
align-items: center;
cursor: pointer;
margin-right: 10px;
}

Answer №3

You can utilize either display:block; or display:flex; (as specified in the answer list).

Avoid using radio as a selector class name since it is a keyword and not recommended to be used in that manner.

Check out this fiddle to experiment with it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.radio {
  display: block;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Custom Radio Button</h1>
  <label for="myRadioId" class="radio">
    <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input">
    Mercedes Benz
  </label>
  <label for="myRadioId2" class="radio">
    <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input">
    BMW
  </label>
  <label for="myRadioId3" class="radio">
    <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input">
    Volkswagen
  </label>
</body>

</html>

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

The $mdSticky feature in AngularJS Material seems to be malfunctioning

It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS. var app=angular.module('app',['ngMaterial']); app.controller(&apos ...

javascriptcssangularjsangular-materialsticky

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Can someone help me with checking if a specific value is in my array? I want to achieve something like that, any suggestions on how to do it? if(jQuery.inArray($('#ValueInputTitle').val, variableValueInput) !== -1) { console.log("is in arr ...

javascriptjqueryhtmlcssjive

Styling with CSS using the em unit to make an image half the size of its parent div element

I'm struggling with resizing an image within a div using the em size unit. I want the image to be half the size of its parent div, so I set both the width and height CSS properties of the image to 0.5em. However, when looking at the code below, you c ...

htmlcssfont-size

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

javascriptphpjqueryhtml

Why does my contact form display PHP code unexpectedly?

I've been following a YouTube tutorial to create a responsive single-page website using Bootstrap. The tutorial covered the front-end, but now I'm stuck on integrating a contact form. I added some PHP code I found online, but there seems to be an ...

phphtmltwitter-bootstrap

The dominance of CSS over other attributes in styling

Imagine having a main body text div and a navigation div for a website. What if you want to make links in the body text green instead of blue, but have the links in the navigation div be red? If you use CSS to make links green, then all links turn green. ...

cssattributes

Attempting to serialize a form using Ajax and jQuery

I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...

javascriptjqueryhtmlajax

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage

Developing a universal.css and universal.js file for a custom WordPress theme

I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files. To integrate all these files into my template, I utilized the following code w ...

javascriptjquerycsswordpress

Assistance needed with extracting specific information using Ajax and C#

I have developed an employee management website using .Net and ASP Entity Framework. On the main page, you can view a list of all employees with their names. However, clicking on a specific employee takes you to another page Profile/Index, where only deta ...

c#htmlasp.netajax

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

Guide on Modifying the CSS File of an Installed Plugin on WordPress

I am looking to customize the design of a WordPress plugin by editing its CSS file. When trying to locate the CSS file of the installed plugin through Plugins --> Installed Plugin --> Editor, I could only find .php files instead of the desired CSS f ...

phphtmlcsswordpress

Strikethrough feature not specified on the website

Check out this unique website that showcases text with a strikethrough. Interestingly, I couldn't find any mention of it in the CSS or HTML code. Here is a snippet from the code: <div style="width:100%;height:259px;background-image: url('< ...

htmlcss

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

javascripthtmllocal-storage

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

htmlvue.jsvuejs2vuetify.js

Encountering a 404 Not Found issue while trying to add scripts with Node.js

I am currently working with a node server and an HTML file, where the default route is being directed. server.js /** * Created by Creative Coder on 10/26/2015. */ var express = require('express'); var mysql = require('mysql'); var a ...

htmlangularjsnode.jsexpress

Aligning HTML form elements side by side

I am having trouble displaying multiple Bootstrap elements and buttons in a single line. Here is an example of what I have: <span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline"> ...

jqueryhtmlcsstwitter-bootstrap

The client continues to request the file through the REST API

I have noticed a behavior with an audio file stored on the server that clients can request via a REST API. It seems that every time the audio is played again, a new request is sent to the server for the file. Is there a way to prevent this or cache the dat ...

javascripthtmlnode.jsexpress

Expanding Image with HTML and CSS: A Guide

In the process of creating my website, I encountered an issue with the logo placement. I wanted the logo to be in the top left corner, similar to the one shown in this image. Initially, everything was working fine until I made some adjustments to move the ...

javascripthtmlcssimagesticky

The ">" CSS child selector does not seem to be functioning correctly with specific properties

While experimenting with applying CSS properties to direct child elements of a parent element using ">", I noticed that it works smoothly with certain properties like borders, but not so much with font-related properties such as color and font-weight. ...

htmlcsscss-selectors