Radio buttons Horizontal Alignment

html css radio-button

42,521

Solution 1

Your css should be for Fieldgroup, not input type. Like so:

<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">BillMe
</label>
</div>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit   Card</label>
</div>
</fieldset>


.fieldgroup{
   float: left;
   width: auto;
   margin-left: 3em;
}

Solution 2

Try display: inline; within your CSS.

42,521

floyd

Updated on October 31, 2020

Comments

floyd over 3 years

How do I get these two radio buttons to horizontally align? No matter what I try they keep vertically aligned or all over the place. As of now they are vertically aligned but i need the labels on the left and the dials on the right and close together.

<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">BillMe
</label>
</div>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit   Card</label>
</div>
</fieldset>

input[type="radio"]{
   float: left;
   width: auto;
   margin-left: 3em;
}

here is all of the html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>San Joaquin Valley Town Hall</title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="styles/tickets.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>

<body>
    <header>
        <img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
        <hgroup>
            <h1>San Joaquin Valley Town Hall</h1>
            <h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a class="current" href="tickets.html">Tickets</a></li>         
        </ul>
    </nav>
    <section>
        <h1>Order Form</h1>
        <form action="register_account.html" method="get"
            name="registration_form" id="registration_form">
            <fieldset>
                <legend>Member Information</legend>
                <label for="email">E-Mail:</label>
                <input type="email" name="email" id="email" autofocus required><br>
                <label for="first_name">First Name:</label>
                <input type="text" name="first_name" id="first_name" required><br>
                <label for="last_name">Last Name:</label>
                <input type="text" name="last_name" id="last_name" required><br>
                <label for="address">Address:</label>
                <input type="text" name="address" id="address"><br>
                <label for="city">City:</label>
                <input type="text" name="city" id="city" required><br>
                <label for="state">State:</label>
                <input type="text" name="state" id="state" required maxlength="2" placeholder="2-character code"><br>
                <label for="zip">ZIP Code:</label>
                <input type="text" name="zip" id="zip" required placeholder="5 or 9 digits" 
                       pattern="^\d{5}(-\d{4})?$" title="Either 5 or 9 digits"><br>
                <label for="phone">Phone Number:</label>
                <input type="tel" name="phone" id="phone" placeholder="999-999-9999" 
                       pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be 999-999-999 format"><br>
                </fieldset>
            <fieldset>
                <legend>Ordering Information</legend>
                <label for="Order Type">Order Type:</label>
                <select name="order_type" id="order_type">
                    <option value="j">Member Package</option>
                    <option value="r">Donar Package</option>            
                    <option value="c">Single Tickets</option>
                </select><br>
                <label for="tickets">Number of Tickets:</label>
                <input type="text" name="tickets" id="tickets" min="1" max="4" placeholder="Number of single tickets"><br>
                </fieldset >
                <fieldset id="payment_method">
                <legend>Payment Method</legend>
                <div class="fieldgroup">
                <input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">Bill Me</label>
                </div><!--/.fieldgroup-->
                <div class="fieldgroup">
                <input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit Card</label>
                </div><!--/.fieldgroup-->
                 </fieldset>
                <fieldset>
                <legend>Credit Card Information</legend>
                <label for="Card Type">Card Type:</label>
                <select name="card_type" id="card_type">
                    <option value="visa">Visa</option>
                    <option value="mcard">Master Card</option>            
                    <option value="disc">Discovery</option>
                </select><br>
                <label for="card_number">Card Number:</label>
                <input type="text" name="card_number" id="card_number"placeholder="16 digits"required
                     pattern="\d{16}" title="Must be 9999999999999999 format"><br>
                <label for="exp_date">Expiration Date:</label>
                <select name="month" id="month">
                    <option value="jan">January</option>
                    <option value="feb">February</option>            
                    <option value="mar">March</option>
                    <option value="apr">April</option>
                    <option value="may">May</option>            
                    <option value="jun">June</option>
                    <option value="jul">July</option>
                    <option value="aug">August</option>            
                    <option value="sep">September</option>
                    <option value="oct">October</option>
                    <option value="nov">November</option>            
                    <option value="dec">December</option>
                </select>
                <select name="month" id="year">
                    <option value="2012">2012</option>
                    <option value="2013">2013</option>            
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>     
                </select>
                </fieldset>
                <fieldset id="buttons">
                <legend>Submit Your Membership</legend>
                <label>&nbsp;</label>
                <input type="submit" id="submit" value="Submit">
                <input type="reset" id="reset" value="Reset Fields"><br>
            </fieldset>
        </form>
    </section>
    <aside>
        <h1 id="speakers">2011-2012 Speakers</h1>
        <h2>October 19, 2011<br><a href="speakers/toobin.html">Jeffrey Toobin</a></h2>
        <img src="images/toobin75.jpg" alt="Jeffrey Toobin photo">
        <h2>November 16, 2011<br><a href="speakers/sorkin.html">Andrew Ross Sorkin</a></h2>
        <img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin photo">
        <h2>January 18, 2012<br><a href="speakers/chua.html">Amy Chua</a></h2>
        <img src="images/chua75.jpg" alt="Amy Chua photo">
        <h2>February 15, 2012<br><a href="speakers/sampson.html">Scott Sampson</a></h2>
        <img src="images/sampson75.jpg" alt="Scott Sampson">
    </aside>
    <footer>
        <p>&copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
    </footer>
</body>
</html>

here is all the css i have

/* So the HTML5 structural tags work in older browsers */
article, aside, figure, footer, header, nav, section {
    display: block;
}
/* the styles for the elements */
* {
    margin: 0;
    padding: 0;
}
html {
    background-color: white;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    width: 800px;
    margin: 0 auto;
    border: 3px solid #800000;
    background-color: #fffded;
}
a:focus, a:hover {
    font-style: italic;
}
/* the styles for the header */
header {

    padding: 1.5em 0;
    background-image: -moz-linear-gradient(
        30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
    background-image: -webkit-linear-gradient(
        30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
    background-image: -o-linear-gradient(
        30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
    background-image: linear-gradient(
        30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
}
header h1 {
    color: #800000;
}
header h2 {
    font-style: italic;
}
header img {
    float: left;
    padding: 0 30px;
}
.shadow {
    text-shadow: 2px 2px 2px #800000;
}
/* the styles for the form */
fieldset {
    margin-top: 0em;
    margin-bottom: .5em;
    padding: .5em 1em .5em 1em;

}
legend {
    color: black;
    font-weight: bold;
    font-size: 85%;
}
label {
    float: left;
    width: 10em;
    text-align: right;
}
input, select {
    width: 15em;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
}
input:required, input[required] {
    border: 2px solid red;
    color: #800000;
}
input:valid {
    border: 1px solid black;
    color: #800000;
}
input:invalid {
    box-shadow: none;
    border: 2px solid red;

}
input[type="radio"]{
   float: left;
   width: auto;
   margin-left: 3em;
   }
br {
    clear: both;
}
#year {
    width: 5em;

}
#month{
   width: 7em;
}
#buttons input {
    width: 10em;
}

/* the styles for the navigation bar */
nav {
    clear: left;
}
nav ul {
    list-style: none;
    padding: 1em 0;       /* padding above and below li elements */
    background-color: #800000; }
nav li {
    display: inline; }
nav a {
    padding: 1em 2em;
    text-decoration: none;
    color: #fffded;
    font-weight: bold;
    border-right: 2px solid #fffded; }
nav a.current { color: yellow; }

/* the styles for the section */
section {
    clear: left;
    padding: 0 20px;
    width: 525px;
    float: right;
}
section h1 {
    color: #800000;
    font-size: 150%;
    padding: .5em 0 .25em;
}
section h2 {
    font-size: 120%;
    padding-bottom: .25em;
}
section p {
    padding-bottom: .5em;
}
section blockquote {
    padding: 0 2em;
    font-style: italic;
}
section ul {
    padding: 0 0 1.5em 1.25em;
    list-style-type: circle;
}
section li {
    padding-bottom: .35em;
}

article {
    border-top: 2px solid #800000;  
    border-bottom: 2px solid #800000;
}
article h1 {
    color: black;
}
article img {
    float: right;
    margin: 1em 0 1em 1em;
    border: 1px solid black;
}
aside {
    width: 215px;
    float: right;
    padding-left: 20px;
}
aside h1 {
    color: #800000;
    font-size: 150%;
    padding: .5em 0 .25em;
}
aside h2 {
    font-size: 120%;
    padding-bottom: .25em;
}
aside img {
    padding-bottom: 1em;
}
figure {
    margin-top: 1em;
}
figcaption {
    color: #800000;
}

table {
    border-collapse: collapse;
}
thead, tfoot {
    border-top: 2px solid #800000;
    border-bottom: 2px solid #800000;
}
th, td {
    padding: .2em .7em;
    text-align: left;
}
tfoot th, tfoot td {
    text-align: right;
    font-weight: bold;
}
.border_bottom {
    border-bottom: 2px solid #800000;
}
.right {
    text-align: right;
}
/*
th:first-child, td:first-child {
    text-align: left;
}
th:first-child {
    vertical-align: bottom; }
th:nth-child(3) {
    text-align: center; }
*/

/* the styles for the footer */
footer {
    border-top: 3px solid #800000;
    clear: both;
}
footer p {
    padding: 1em 0;
    text-align: center;
}

marathonman almost 10 years

i think he asked for input label alignment. somethink like this.change values for ur needs. margin: 5px 0 0; margin-top: 1px \10;line-height: normal;
floyd almost 10 years

No because when you put that code in they become vertical again. I need them horizontally in a row. label dial label dial
The_DemoCorgin almost 10 years

This is what I'm getting. Is it that you want it label dial label dial and not dial label dial label? Or are you getting different results than this? Perhaps I am missing what you are looking for.
floyd almost 10 years

yes ts..what you got is how I want it. however when I put it in my code they are vertical again..i am getting different results for some reason
The_DemoCorgin almost 10 years

Have you tried updating the cache? Inspect the element in your browser and make sure it is pulling the updated code. Also, here is a jsFiddle of it
floyd almost 10 years

Marathonman...you are close..I just have to get the dials closer to the lables
The_DemoCorgin almost 10 years

Here is the fiddle with some of marathonman's updates. Changing the float to left or right in the css for input[type="radio"] will change which side of the label the radio button is on.
floyd almost 10 years

I just looked at your jsFiddle of it. THat is exactly how I need it to be. Maybe there is something elsewhere in the code that is preventing it perhaps? I retried it in 3 different browsers and all still vertical.
The_DemoCorgin almost 10 years

Could you link to the webpage at all? Inspect the element in FF with firebug or with the chrome equivalent to make sure its pulling the updated code. That's all I can think of that might be preventing it, unless there are prior definitions in the css file that are taking priority.
floyd almost 10 years

The only thing I see that could prevent it is this perhaps article, aside, figure, footer, header, nav, section { display: block; }
floyd almost 10 years

article, aside, figure, footer, header, nav, section { display: block; }
The_DemoCorgin almost 10 years

No, none of that should prevent it from working. Sorry to be an old record here but have you inspected it in the browser where it isn't working to insure that the new code is being pulled?
The_DemoCorgin almost 10 years

Well without seeing any more code I can't for sure say why it wouldn't be working for you.
The_DemoCorgin almost 10 years

That code was lacking the margin adjustments that marathonman suggested. It also had label set to text-align:right. I added the margin code and adjusted the text align to fix some of the white space. The buttons are horizontally stacked for me, though. Here is the fiddle for it.
svarog over 6 years

this answer has appeared on the low quality posts queue due to it's short length, would you mind explaining your solution ?!
Jolta over 6 years

Please answer in English only.