CSS / HTML字段集与图例并排

Question

I just wanna ask how can i make that side by side? i know this has already been questioned many times here but i already tried the solutions that they've said worked. like adding <div> or putting a class wrap in the <div> or using box-sizing but neither of them worked.

Any suggestions?

EDITED: here are my codes:

CSS:

html, body, h1, form, legend, ol, li {
    margin: 0;
    padding: 0;
}

body {
    background: dimgray;
    color: #dimgray;
    font-family: "Gill Sans MT", sans-serif;
    padding: 15px;
}

/*size of the gray box inside legend*/
form#payment {
    background: #696969;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 400px;
}   

/*title in the legend/legend itself*/
form#payment legend {
    color:  #ffffff;
    font-size: 16px;
}

/*legend inside the Card details (choosing of card type)*/
form#payment fieldset fieldset legend {
    color: #111111;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 0;
}

/*gray box inside legend*/
form#payment ol li {
    background: rgba(255,255,255,.3);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}
form#payment ol ol li {
    background: none;
    border: none;
    float: left;
}

/*input details/label*/
form#payment label {
    float: left;
    font-size: 13px;
    width: 110px;
}

/*arrangement/organization of card type legend*/
form#payment fieldset fieldset label {
    background:none no-repeat left 50%;
    line-height: 20px;
    padding: 0 0 0 30px;
    width: auto;
}


form#payment input:not([type=radio]),
form#payment textarea {
    background: #ffffff;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font: "Gill Sans MT", sans-serif;
    outline: none;
    padding: 5px;
    width: 200px;
}

/*radio button position*/
form#payment input[type=radio] {
    float: left;
    margin-right: 5px;
}

form#payment button {
    background: #191970;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    color: #ffffff;
    font: 18px "Gill Sans MT", sans-serif;
    letter-spacing: 1px;
    padding: 7px 25px;
    text-transform: uppercase;
}

HTML:

<form id="payment">

    <fieldset>
        <legend>Delivery address</legend>
        <ol>
            <li>
                <label>Address</label>
                <textarea name="address" rows="5" required></textarea>
            </li>
            <li>
                <label>Post code</label>
                <input name="postcode" type="text" required>
            </li>
            <li>
                <label>Country</label>
                <input name="country" type="text" required>
            </li>
        </ol>
    </fieldset>


    <fieldset>
        <legend>Card details</legend>
        <ol>        
            <li>
                <fieldset>
                    <legend>Card type</legend>
                    <ol>
                        <li>
                            <input name="cardtype" type="radio">
                            <label for="visa">VISA</label>
                        </li>
                        <li>
                            <input name="cardtype" type="radio">
                            <label for="mastercard">Mastercard</label>
                        </li>
                    </ol>
                </fieldset>
            </li>
            <li>
                <label>Card number</label>
                <input name="cardnumber" type="number" required>
            </li>
            <li>
                <label>Security code</label>
                <input name="secure" type="number" required>
            </li>
            <li>
                <label>Name on card</label>
                <input name="namecard" type="text" placeholder="Exact name as on the card" required>
            </li>
        </ol>
    </fieldset>

    <br>
    <button type="submit">Buy it!</button>
</form>

Answer 1

So if I understand your question right, you want the 2 block elements (Delivery address & Card details) to be next each other? If that is the case, I would recommend using a framework like Bootstrap or Foundation for this.

Then if you include for example Bootstrap Grid, you can use:

<div class="row">
    <div class="col-xs-6">
        first block goes here
    </div>
    <div class="col-xs-6">
        second block goes here
    </div>
</div>

If this is not what you want, please as already was mentioned, post you code in JsFiddle