Позиционирование элементов Fieldset под другими

Question

Я загрузил шаблон веб-сайта, и я пытаюсь внести некоторые изменения в способ отображения его части. Форматирование по умолчанию отлично подходит для большинства полей ввода, но при попытке сделать несколько небольших изменений я полностью сломаю его.

Поля IP Распределение в порядке. Для Inventory я пытаюсь объединить Fieldsets, чтобы не было промежутка между двумя полями, но любые изменения, которые я делаю, приводят к этому сломанному CSS. Красные линии показывают, где я их ожидаю, но не могу понять, как правильно их расположить.

   <fieldset style="width:30%; float:left; margin-left: 19%; margin-right: 2%;"> <!-- to make two field float next to one another, adjust values accordingly --> 
        <label>IP Allocation</label> 
        <input type="text" style="width:92%;"> 
       </fieldset> 
       <fieldset style="width:30%; float:left;"> <!-- to make two field float next to one another, adjust values accordingly --> 
        <label>IP Allocation</label> 
        <input type="text" style="width:92%;"> 
       </fieldset><div class="clear"></div> 

       <p><div align="center"><h2>Inventory</h2></div><p> 

       <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly --> 
        <label>Type</label> 
        <input type="text" style="width:25%; float:left; margin-right: 2%;"> 
        <label>Item</label> 
        <input type="text" style="width:25%; float:left;"> 
       </fieldset><div class="clear"></div> 

UPDATE

После некоторых модификаций коды и стилей, я был в состоянии получить его близко к целевому макету. Однако является ли «законным» делать 2 ярлыка, а затем 2 входа? Может ли это быть более точно зафиксировано?

   <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly --> 
        <label style="width:45%;">Type</label> 
        <label style="width:45%;">Item</label> 
        <input type="text" style="width:45%; clear: left;"> 
        <input type="text" style="width:45%;"> 
       </fieldset><div class="clear"></div> 

Answer 1

Вы не должны плавать входные элементы, так как они содержатся в перемещаемого полей.

Вы можете исправить это, просто удалив входной поплавок (так он отображается как блок) или clear: left с этикеткой.

Answer 2

удалить все строчный стиль и сделать это:

Примечание: что я подрезал немного от ширины входа, чтобы компенсировать границы на входе

[http://jsbin.com/ohajox/1 /] [1]

ярлык {ширина: 10%; плыть налево; }

ввод {ширина: 38%; плыть налево;

}