CSS/HTML 字段集与图例并排

Posted 2023-02-16

【中文标题】CSS/HTML 字段集与图例并排

【英文标题】：CSS/HTML fieldset with legend side by side

【发布时间】：2016-04-27 16:24:18

【问题描述】：

我只想问我怎样才能把它并排？我知道这已经在这里被质疑了很多次，但我已经尝试了他们所说的有效的解决方案。就像添加<div> 或将类包装放在<div> 或使用box-sizing 但它们都不起作用。

有什么建议吗？

编辑： 这是我的代码：

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>

【参考方案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

【讨论】：

我不能真正使用引导程序或基础，我真的只是一个初学者。但这里是代码jsfiddle.net/aLfh78sn

使用像 Bootstrap 这样的框架确实适合初学者。我建议使用 Bootstrap 并从那里开始。

好的，所以我为你做了一个非常快速和肮脏的解决方案。在 CSS 中使用 Bootstrap 网格（硬编码）。由于您的 CSS，UI 有点混乱。但至少你有你想要/需要的结果。 jsfiddle.net/aLfh78sn/7

这也是我的问题。每次我尝试在这里看到的解决方案时，我都会得到结果，但总是搞砸

这与您自己的代码弄乱了 UI 有关。您不能只是复制和粘贴代码并祈祷它会正常工作。您需要学习/理解代码。所以这就是为什么我推荐一个像 Bootstrap 这样的框架，如果你不理解就不要创建你自己的东西。