HTML 单选按钮不会并排显示

Question

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.我的 HTML 表单遇到了一些问题，我尝试查找它并在线寻找解决方案，但我发现的“解决方案”对我不起作用。 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:这是我的 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 &copy; 2013 Richard Paulicelli
    <br>
    You can send me an email at <a href="mailto:richardpaulicelli@yahoo.com">richardpaulicelli@yahoo.com</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 input it 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; } input.radio { display: inline; }

I have tried doing #fav_Lang input.radio { display: inline; }我试过#fav_Lang input.radio { display: inline; } #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 :)谢谢:)

Answer 1

Your selector should be input[type=radio]你的选择器应该是input[type=radio]

Demo here (click).演示在这里（单击）。

Keep in mind that it's best practice avoid applying styles that need to be overridden later.请记住，最佳做法是避免应用稍后需要覆盖的样式。 Check out SMACSS and OOCSS .查看SMACSS和OOCSS 。

Answer 2

If you're going to do如果你要做

input.radio { display: inline; }

then you need to add class="radio" to your radio buttons.那么您需要将class="radio"添加到您的单选按钮中。

Answer 3

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.我找到了一个项目，这个人只用 html 来做你问的这件事。

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.这是他的密码笔。

HTML 单选按钮不会并排显示

问题描述

3 个解决方案

解决方案1
4 已采纳 2013-11-22 02:01:29

解决方案2
2 2013-11-22 02:06:47

解决方案3
0 2020-07-16 18:54:42

HTML 单选按钮不会并排显示

问题描述

3 个解决方案

解决方案1 4 已采纳 2013-11-22 02:01:29

解决方案2 2 2013-11-22 02:06:47

解决方案3 0 2020-07-16 18:54:42

解决方案1
4 已采纳 2013-11-22 02:01:29

解决方案2
2 2013-11-22 02:06:47

解决方案3
0 2020-07-16 18:54:42