Question

我只想问我怎么能并排？我知道这已经在这里多次受到质疑，但我已经尝试过他们所说过的解决方案。比如添加<div>或在<div>或使用box-sizing中放置一个类包装，但它们都不起作用。

有什么建议吗？

EDITED：这是我的代码：

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

因此，如果我理解您的问题，您希望2块元素（送货地址和卡详细信息）是彼此相邻的吗？如果是这种情况，我建议使用像Bootstrap或Foundation这样的框架。

然后，如果您包含例如Bootstrap Grid，则可以使用：

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

如果这不是您想要的，请按照已经提到的那样，将代码发布到 JsFiddle

带有图例的CSS / HTML字段集

1 个答案: