HTML 单选按钮不会并排显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20135602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML radio buttons will not display side by side
提问by Richard Paulicelli
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.
我的 HTML 表单遇到了一些问题，我尝试查找它并在线寻找解决方案，但我发现的“解决方案”对我不起作用。我遇到的问题是我的单选按钮没有并排显示。我相信我知道为什么，但如果我知道是什么导致了它，它会破坏我其余的表格。
Here is my HTML code:
这是我的 HTML 代码：
<!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="http://webdevbasics.net/scripts/demo.php">
<br>
<label for="myName">Name:</label>
<input type="text" name="myName" id="Name">
<label for="myEmail">Email:</label>
<input type="text" name="myEmail" id="Email">
<br><br>
<label for="Favorite_Browser">Favorite Browser:</label>
<select size="1" name="Favorite_Browser" id="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" id="fav_Lang" value="VB.net">VB.Net
<input type="radio" name="fav_Lang" id="fav_Lang" value="Java">Java
<input type="radio" name="fav_Lang" id="fav_Lang" value="HTML">HTML
<input type="radio" name="fav_Lang" id="fav_Lang" value="C++">C++
<input type="radio" name="fav_Lang" id="fav_Lang" value="Ruby">Ruby
<br><br>
<label for="myComments">Comments:</label>
<textarea name="myComments" id="Comments:" rows="3" cols="20"></textarea>
<input id ="mySubmit" type="submit" value="Submit">
<br>
</form>
<!-- Footer space-->
<div id="footer">
<br>
Copyright © 2013 Richard Paulicelli
<br>
You can send me an email at <a href="mailto:[email protected]">[email protected]</a>
<br><br>
</div>
<!-- End Footer space-->
Here is my CSS style sheet code:
这是我的 CSS 样式表代码：
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:
现在我认为导致问题的原因是在我的 CSS 样式表中，这里是这一行：
input, textarea, select { margin-top: 10px; display: block; }
However, if I remove inputit fixes the radio buttons but the rest of my form is messed up.
但是，如果我删除input它会修复单选按钮，但表单的其余部分却一团糟。
I have tried doing input.radio { display: inline; }
我试过做 input.radio { display: inline; }
I have tried doing #fav_Lang input.radio { display: inline; }(fav_Lang being the radio buttons name and ID).
我试过#fav_Lang input.radio { display: inline; }（fav_Lang 是单选按钮名称和 ID）。
So i'm at a total loss on what to do, any help would be greatly appreciated. Thanks :)
所以我完全不知道该怎么做，任何帮助将不胜感激。谢谢 ：）
回答by m59
回答by Jeff
If you're going to do
如果你要做
input.radio { display: inline; }
then you need to add class="radio"to your radio buttons.
那么你需要添加class="radio"到你的单选按钮。
