Набор полей CSS/HTML с легендой рядом

Я просто хочу спросить, как я могу сделать это рядом? я знаю, что это уже много раз задавалось здесь вопросом, но я уже пробовал решения, которые, по их словам, сработали. например, добавление <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>

html css fieldset legend
person bruh    schedule 21.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, если я правильно понимаю ваш вопрос, вы хотите, чтобы 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.

person Bertjuhh    schedule 21.01.2016
comment
я не могу использовать бутстрап или основу, я действительно новичок. но вот код jsfiddle.net/aLfh78sn - person bruh; 21.01.2016
comment
Использование таких фреймворков, как Bootstrap, действительно создано для начинающих. Я бы предложил использовать Bootstrap и идти оттуда. - person Bertjuhh; 21.01.2016
comment
Итак, я сделал для вас очень быстрое и грязное решение. Использование сетки Bootstrap (жестко закодированной) в CSS. Пользовательский интерфейс немного испорчен из-за вашего CSS. Но, по крайней мере, у вас есть результат, который вы хотите / нуждаетесь. jsfiddle.net/aLfh78sn/7 - person Bertjuhh; 21.01.2016
comment
это тоже моя проблема. каждый раз, когда я пробовал решения, которые я видел здесь, у меня был результат, но он всегда испорчен - person bruh; 21.01.2016
comment
Это связано с тем, что ваш собственный код портит пользовательский интерфейс. Вы не можете просто скопировать и вставить код и скрестить пальцы, чтобы он работал нормально. Вам нужно изучить/понять код. Вот почему я рекомендую такой фреймворк, как Bootstrap, и не создавайте свой собственный материал, если вы его не понимаете. - person Bertjuhh; 21.01.2016