Родитель и ребенок div с формой

Question

У меня есть этот код: http://jsfiddle.net/bUPWS/1/, но # div2 переполняет # div1.Как приблизить переполненные входы к другим?

    <div id="div1">
    <div id="div2">
        <form>
            <input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/>
        </form>
    </div>
</div>

#div1 {
    width:400px;
    height:100px;
    border:1px solid red;
}

Answer 1

видя ваш код, я могу сказать, что вы используете тег <br />, поэтому нет никакого способа приблизить ваши входные данные друг к другу.просто удалите каждый <br/>, все ваши входы будут правильно выровнены.

дополнительно вы можете использовать min-height для родительского div div1

#div1 {
    width:400px;
    min-height:100px;
    border:1px solid red;
}

#div2 input {display:inline; }

, если ваши входы увеличиваются больше, чем пределиз 100px height ваш родительский div отрегулирует высоту относительно входных данных внутри вашего div2 блока

РЕДАКТИРОВАТЬ: Однако, чтобы объяснить мой комментарий ниже, я обновил ваш пример скрипки, вы можетепроверьте, как мы можем достичь этого, используя <ul> <li></li></ul> теги

Пример Fiddle

Код, если здесь!

HTML

<div id="div1">
    <div id="div2">
        <form>
            <ul>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
           </ul>
            <ul>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
            </ul>

        </form>
    </div>
</div>

CSS

#div1 {
    width:800px;
    min-height:100px;
    border:1px solid red;
}
*{padding:0; margin:0}
#div2 ul{float:left; padding-left:10px; }

Answer 2

Попробуйте использовать fieldset вместо div. см .: http://www.w3schools.com/tags/tag_fieldset.asp

Answer 3

Я не уверен, что это то, что вы ищете, но вы можете установить переполнение: auto для div 1 и установить float: left для входов. скрипка: http://jsfiddle.net/bUPWS/28/