当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Radio buttons Horizontal Alignment

问题描述:

How do I get these two radio buttons to horizontally align? No matter what I try they keep vertically aligned or all over the place. As of now they are vertically aligned but i need the labels on the left and the dials on the right and close together.

<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;

}

here is all of the 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>&nbsp;</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>&copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

</footer>

</body>

</html>

here is all the css i have

/* 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;

}

网友答案:

Your css should be for Fieldgroup, not input type. Like so:

<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;
}
网友答案:

Try display: inline; within your CSS.

分享给朋友:
您可能感兴趣的文章:
随机阅读: