I'm having some trouble with my HTML form, I've tried looking it up and looking for solutions online and the "solutions" I found did not work for me. The issue that I am having is that my Radio Buttons are not displaying side-by-side. And i believe I know why, but if i get of what's causing it, it mucks up the rest of my form.
Here is my HTML code:
<!DOCTYPE HTML> <html> <head> <title>Survey</title> <meta charset="utf-8"> <link rel="stylesheet" href="P9Style.css"> </head> <body> <h1 align="Center"> SURVEY </h1> </body> <form method="post" action=""> <br> <label for="myName">Name:</label> <input type="text" name="myName"> <label for="myEmail">Email:</label> <input type="text" name="myEmail"> <br><br> <label for="Favorite_Browser">Favorite Browser:</label> <select size="1" name="Favorite_Browser"> <option value="Internet Explorer">Internet Explorer</option> <option value="Mozzila Firefox">Mozzila Firefox</option> <option value="Apple Safari">Apple Safari</option> <option value="Opera Browser">Opera Browser</option> </select> <br><br> Select your favorite Programming Language:<br> <input type="radio" name="fav_Lang" value="VB.net">VB.Net <input type="radio" name="fav_Lang" value="Java">Java <input type="radio" name="fav_Lang" value="HTML">HTML <input type="radio" name="fav_Lang" value="C++">C++ <input type="radio" name="fav_Lang" value="Ruby">Ruby <br><br> <label for="myComments">Comments:</label> <textarea name="myComments" rows="3" cols="20"></textarea> <input id ="mySubmit" type="submit" value="Submit"> <br> </form> <!-- Footer space--> <div> <br> Copyright © 2013 Richard Paulicelli <br> You can send me an email at <a href="mailto:"></a> <br><br> </div> <!-- End Footer space--> Here is my CSS style sheet code:
form { background-color: #eaeaea; font-family: Arial, sans-erif; width: 350px; padding: 10; } label { float: left; width: 100px; display: block; clear: left; text-align: right; padding-right: 10px; margin-top: 10px; } input, textarea, select { margin-top: 10px; display: block; } #mySubmit { margin-left: 110px; } #footer { background-color: #CCCFFF; text-align: center; color: #333333; font-size: 1em; clear: both; } Now what I believe is causing the problem is in my CSS style sheet and it's this line right here:
input, textarea, select { margin-top: 10px; display: block; } However, if I remove input it fixes the radio buttons but the rest of my form is messed up.
I have tried doing input.radio { display: inline; }
I have tried doing #fav_Lang input.radio { display: inline; } (fav_Lang being the radio buttons name and ID).
So i'm at a total loss on what to do, any help would be greatly appreciated. Thanks :)
23 Answers
Your selector should be input[type=radio]
Keep in mind that it's best practice avoid applying styles that need to be overridden later. Check out SMACSS and OOCSS.
0If you're going to do
input.radio { display: inline; } then you need to add class="radio" to your radio buttons.
I know this was posted way long ago, but I found this thread because I was looking for the same thing. I'm also a novice learner/new here, so please critique me if I'm contributing to a discussion in a wrong way. Apologies and thanks in advance. Anyway...
I found a project where the guy used only html to do this thing you're asking about.
I'll try to give an example:
<div> <label>Is this what you're trying to do?</label> <tr> <td><input type="radio">Cool Radio Button</td> <td><input type="radio">Not Cool</td> <td><input type="radio">Totally Missed The Point</td> </tr> </div> This is his codepen.
1
