Question

我的HTML表单遇到了一些问题，我已经尝试查找并在线寻找解决方案，而我发现的“解决方案”并不适用于我。我遇到的问题是我的收音机按钮没有并排显示。而且我相信我知道为什么，但如果我知道造成它的原因，它会破坏我表格的其余部分。

这是我的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-->

这是我的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; }

现在我认为导致问题的是我的CSS样式表，这就是这一行：

    input, textarea, select { margin-top: 10px; display: block; }

但是，如果我删除了input，它会修复单选按钮，但表格的其余部分会搞砸。

我尝试过input.radio { display: inline; }

我尝试过#fav_Lang input.radio { display: inline; }（fav_Lang是单选按钮名称和ID）。

所以我完全不知道该怎么做，任何帮助都会非常感激。谢谢:)）

Answer 1

您的选择器应为input[type=radio]

Demo here (click).

请记住，最佳做法是避免应用以后需要覆盖的样式。查看SMACSS和OOCSS。

Answer 2

如果你要去做

input.radio { display: inline; }

然后您需要将class="radio"添加到单选按钮。

Answer 3

我知道这是很久以前发布的，但是我发现了这个主题，因为我正在寻找相同的东西。我也是这里的新手学习者/新手，所以如果我以错误的方式为讨论做出了贡献，请批评我。致歉，并在此先感谢。反正...

我找到了一个项目，其中那个家伙只使用html来完成您要问的事情。

我会举一个例子：

<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是他的codepen。

HTML单选按钮不会并排显示

3 个答案: