gpt4 book ai didi

HTML 单选按钮不会并排显示

转载 作者:太空宇宙 更新时间:2023-11-03 20:16:20 25 4
gpt4 key购买 nike

我的 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)。

所以我完全不知道该怎么做,任何帮助将不胜感激。谢谢:)

最佳答案

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

Demo here (click).

请记住,最好避免应用需要稍后覆盖的样式。查看SMACSSOOCSS .

关于HTML 单选按钮不会并排显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20135602/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com