带有并排图例的CSS/HTML字段集

我只是想问我怎样才能做到这一点？我知道这已经被质疑过很多次了，但我已经尝试过他们说有效的解决方案。例如添加

或将类包装放入

或使用

框大小调整

，但两者都不起作用

有什么建议吗

编辑： 这是我的密码：

CSS:

HTML:

送货地址

地址


邮政编码


国家

卡片详细信息

卡片类型

签证


万事达卡



卡号


安全代码


卡片上的名字



买它！

如果我没弄错您的问题，您希望两个区块元素（送货地址和卡片详细信息）相邻吗？ 如果是这样的话，我建议使用像Bootstrap或基金会这样的框架。

然后，如果包括例如引导网格，则可以使用：

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

第一个街区到这里
第二个街区在这里

如果这不是你想要的，请如前所述，将你的代码发布在

---

我真的不能用Bootstrap或基金会，我真的只是个初学者。但是这里的代码使用的是像Bootstrap这样的框架，它是为初学者设计的。我建议使用Bootstrap并从那里开始。好的，我已经为您提供了一个非常快速和肮脏的解决方案。在CSS中使用引导网格（硬编码）。用户界面有点混乱，这是因为你的CSS。但至少你有你想要/需要的结果。这也是我的问题。每次我尝试我在这里看到的解决方案，我都会得到结果，但总是一团糟，这与你自己的代码弄乱了UI有关。您不能只是复制和粘贴代码，然后祈祷它能正常工作。你需要学习/理解代码。这就是为什么我推荐一个像Bootstrap这样的框架，如果你不理解它，就不要创建你自己的东西。

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

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