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

Question

我只想问一问，我该如何让它并排？我知道这已经在这里多次提出质疑，但我已经尝试过他们说过的解决方案。例如添加<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> 

Answer 1

所以，如果我理解你的问题吧，你想要的2块元素（送货地址&卡细节）是否是下一个彼此？ 如果是这样的话，我会推荐使用像Bootstrap或Foundation这样的框架。

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

<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