如何让这两个单选按钮水平对齐？无论我尝试什么，他们都保持垂直对齐或整个地方。截至目前，它们是垂直对齐的，但我需要左边的标签和右边的刻度盘并且靠近在一起。
<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">BillMe
</label>
</div>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit Card</label>
</div>
</fieldset>
input[type="radio"]{
float: left;
width: auto;
margin-left: 3em;
}
这里是所有的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/tickets.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<header>
<img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
<hgroup>
<h1>San Joaquin Valley Town Hall</h1>
<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="current" href="tickets.html">Tickets</a></li>
</ul>
</nav>
<section>
<h1>Order Form</h1>
<form action="register_account.html" method="get"
name="registration_form" id="registration_form">
<fieldset>
<legend>Member Information</legend>
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" autofocus required><br>
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" required><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" required><br>
<label for="address">Address:</label>
<input type="text" name="address" id="address"><br>
<label for="city">City:</label>
<input type="text" name="city" id="city" required><br>
<label for="state">State:</label>
<input type="text" name="state" id="state" required maxlength="2" placeholder="2-character code"><br>
<label for="zip">ZIP Code:</label>
<input type="text" name="zip" id="zip" required placeholder="5 or 9 digits"
pattern="^\d{5}(-\d{4})?$" title="Either 5 or 9 digits"><br>
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone" placeholder="999-999-9999"
pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be 999-999-999 format"><br>
</fieldset>
<fieldset>
<legend>Ordering Information</legend>
<label for="Order Type">Order Type:</label>
<select name="order_type" id="order_type">
<option value="j">Member Package</option>
<option value="r">Donar Package</option>
<option value="c">Single Tickets</option>
</select><br>
<label for="tickets">Number of Tickets:</label>
<input type="text" name="tickets" id="tickets" min="1" max="4" placeholder="Number of single tickets"><br>
</fieldset >
<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">Bill Me</label>
</div><!--/.fieldgroup-->
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit Card</label>
</div><!--/.fieldgroup-->
</fieldset>
<fieldset>
<legend>Credit Card Information</legend>
<label for="Card Type">Card Type:</label>
<select name="card_type" id="card_type">
<option value="visa">Visa</option>
<option value="mcard">Master Card</option>
<option value="disc">Discovery</option>
</select><br>
<label for="card_number">Card Number:</label>
<input type="text" name="card_number" id="card_number"placeholder="16 digits"required
pattern="\d{16}" title="Must be 9999999999999999 format"><br>
<label for="exp_date">Expiration Date:</label>
<select name="month" id="month">
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">October</option>
<option value="nov">November</option>
<option value="dec">December</option>
</select>
<select name="month" id="year">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</fieldset>
<fieldset id="buttons">
<legend>Submit Your Membership</legend>
<label> </label>
<input type="submit" id="submit" value="Submit">
<input type="reset" id="reset" value="Reset Fields"><br>
</fieldset>
</form>
</section>
<aside>
<h1 id="speakers">2011-2012 Speakers</h1>
<h2>October 19, 2011<br><a href="speakers/toobin.html">Jeffrey Toobin</a></h2>
<img src="images/toobin75.jpg" alt="Jeffrey Toobin photo">
<h2>November 16, 2011<br><a href="speakers/sorkin.html">Andrew Ross Sorkin</a></h2>
<img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin photo">
<h2>January 18, 2012<br><a href="speakers/chua.html">Amy Chua</a></h2>
<img src="images/chua75.jpg" alt="Amy Chua photo">
<h2>February 15, 2012<br><a href="speakers/sampson.html">Scott Sampson</a></h2>
<img src="images/sampson75.jpg" alt="Scott Sampson">
</aside>
<footer>
<p>© 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>
这是我所拥有的所有css
/* So the HTML5 structural tags work in older browsers */
article, aside, figure, footer, header, nav, section {
display: block;
}
/* the styles for the elements */
* {
margin: 0;
padding: 0;
}
html {
background-color: white;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 800px;
margin: 0 auto;
border: 3px solid #800000;
background-color: #fffded;
}
a:focus, a:hover {
font-style: italic;
}
/* the styles for the header */
header {
padding: 1.5em 0;
background-image: -moz-linear-gradient(
30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
background-image: -webkit-linear-gradient(
30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
background-image: -o-linear-gradient(
30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
background-image: linear-gradient(
30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
}
header h1 {
color: #800000;
}
header h2 {
font-style: italic;
}
header img {
float: left;
padding: 0 30px;
}
.shadow {
text-shadow: 2px 2px 2px #800000;
}
/* the styles for the form */
fieldset {
margin-top: 0em;
margin-bottom: .5em;
padding: .5em 1em .5em 1em;
}
legend {
color: black;
font-weight: bold;
font-size: 85%;
}
label {
float: left;
width: 10em;
text-align: right;
}
input, select {
width: 15em;
margin-left: 0.5em;
margin-bottom: 0.5em;
}
input:required, input[required] {
border: 2px solid red;
color: #800000;
}
input:valid {
border: 1px solid black;
color: #800000;
}
input:invalid {
box-shadow: none;
border: 2px solid red;
}
input[type="radio"]{
float: left;
width: auto;
margin-left: 3em;
}
br {
clear: both;
}
#year {
width: 5em;
}
#month{
width: 7em;
}
#buttons input {
width: 10em;
}
/* the styles for the navigation bar */
nav {
clear: left;
}
nav ul {
list-style: none;
padding: 1em 0; /* padding above and below li elements */
background-color: #800000; }
nav li {
display: inline; }
nav a {
padding: 1em 2em;
text-decoration: none;
color: #fffded;
font-weight: bold;
border-right: 2px solid #fffded; }
nav a.current { color: yellow; }
/* the styles for the section */
section {
clear: left;
padding: 0 20px;
width: 525px;
float: right;
}
section h1 {
color: #800000;
font-size: 150%;
padding: .5em 0 .25em;
}
section h2 {
font-size: 120%;
padding-bottom: .25em;
}
section p {
padding-bottom: .5em;
}
section blockquote {
padding: 0 2em;
font-style: italic;
}
section ul {
padding: 0 0 1.5em 1.25em;
list-style-type: circle;
}
section li {
padding-bottom: .35em;
}
article {
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
}
article h1 {
color: black;
}
article img {
float: right;
margin: 1em 0 1em 1em;
border: 1px solid black;
}
aside {
width: 215px;
float: right;
padding-left: 20px;
}
aside h1 {
color: #800000;
font-size: 150%;
padding: .5em 0 .25em;
}
aside h2 {
font-size: 120%;
padding-bottom: .25em;
}
aside img {
padding-bottom: 1em;
}
figure {
margin-top: 1em;
}
figcaption {
color: #800000;
}
table {
border-collapse: collapse;
}
thead, tfoot {
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
}
th, td {
padding: .2em .7em;
text-align: left;
}
tfoot th, tfoot td {
text-align: right;
font-weight: bold;
}
.border_bottom {
border-bottom: 2px solid #800000;
}
.right {
text-align: right;
}
/*
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
vertical-align: bottom; }
th:nth-child(3) {
text-align: center; }
*/
/* the styles for the footer */
footer {
border-top: 3px solid #800000;
clear: both;
}
footer p {
padding: 1em 0;
text-align: center;
}
答案 0 :(得分：4)
你的css应该是Fieldgroup，而不是输入类型。像这样：
<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">BillMe
</label>
</div>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit Card</label>
</div>
</fieldset>
.fieldgroup{
float: left;
width: auto;
margin-left: 3em;
}
答案 1 :(得分：1)
在CSS中尝试display: inline;。
答案 2 :(得分：-1)
你的css：
#radioGrupo{
display: flex;
}
你的HTML：
<ion-list id="radioGrupo" radio-group [(ngModel)]="tipoBusca">
<ion-item>
<ion-label>NAME</ion-label>
<ion-radio value="1" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>COMERCIAL</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>CODE</ion-label>
<ion-radio value="3"></ion-radio>
</ion-item>
</ion-list>
使用flexbox，Display属性可以水平显示项目
更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/