CODEWITHSUNDEEP
htmlcssradio-button
jakewies
jakewies

Reputation: 362

CSS Radio Button issues

I'm putting together a simple form to deposit a set amount of money. The form has 4 radio buttons.

<form action="deposit.php" method="post"> <fieldset> <div class="form-group"> <input type="radio" name="deposit" value="100"> $100 <br> <input type="radio" name="deposit" value="250"> $250 <br> <input type="radio" name="deposit" value="500"> $500 <br> <input type="radio" name="deposit" value="1000"> $1,000 <br> </div> <div class="form-group"> <button type="submit" class="btn btn-default">Deposit</button> </div> </fieldset> </form>

Here is the output: enter image description here

You can see that the last radio button is not vertically aligned. I realize that there are 2 extra characters in the text after the button. I'm no CSS wizard and haven't really found the answer to making these buttons straight. Any ideas?

EDIT: CSS code here:

.container {
    /* center contents */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

input[type='radio'] {
    width: 20px;
}

The form is in the container

Upvotes: 0

Views: 172

Answers (2)

Skywalker
Skywalker

Reputation: 5194

In your CSS file or within your HTML code you are using the "align centre" setting. Thats why is not aligned.

This is the output of your above code with the align centre setting:

enter image description here

And this is the output of your code without the align centre setting:

enter image description here

Somewhere in your code you are setting the below div class to align centre.

 // Removing the align setting will solve the issue. If its not in-line CSS then check you external CSS file.
 <div class="form-group" align="center">

Hope this helps.

Upvotes: 1

HenriSwagz
HenriSwagz

Reputation: 21

Why not use tables to make the buttons align (its easier with dreamweaver as your editing tool)

Upvotes: 1

Related Questions