Radio buttons Horizontal Alignment

2019-07-20 04:56发布

站内问答 / CSS3
1450 3 4

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

3条回答
你好瞎i
2楼-- · 2019-07-20 05:40

Try display: inline; within your CSS.

查看更多
0人赞 添加讨论(0) 举报
beautiful°
3楼-- · 2019-07-20 05:41

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;
}
查看更多
0人赞 添加讨论(0) 举报
贼婆χ
4楼-- · 2019-07-20 05:54

your css:

 #radioGrupo{
        display: flex;
 }

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

Using flexbox the Display property shows items horizontally

More information: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)