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.

Затем, если включить, например, 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