Плавающие многострочные поля

Question

У меня есть разметка на множестве полей с несколькими полями. Внутри контейнера они плавают и создают форму вместе.

Без каких-либо «хаков» мои наборы полей не плавают, потому что они являются элементами блока и поэтому выровнены ниже друг друга. Прямо сейчас я использую отрицательный запас, чтобы получить мой второй набор полей рядом с последним элементом набора полей 1. Это своего рода хакерское imo и довольно раздражает, если у вас есть несколько полей и других форм, которые немного отличаются друг от друга. Значит, я должен дублировать некоторый код css и переопределять его вместо того, чтобы иметь плавно-плавучую форму.

Есть ли возможность иметь последний элемент fieldset 1 и первый элемент fieldset 2, плавающий соответствующим образом?

E: Я создал небольшую скрипку для рядного блока proposuals - не работает для меня в хроме: Fiddle

<fieldset> 
    <input type="text" /> 
    <input type="text" /> 
    <input type="text" /> 
    <input type="text" /> 
    <input type="text" /> 
</fieldset> 
<fieldset> 
    <input type="text" /> 
</fieldset> 

fieldset { 
    border: none; 
    display: inline-block; 
} 
input { 
    display: inline-block; 
} 

Answer 1

Убедитесь, что fieldset1 и контейнер fieldset2 установлен как display: inline-block; и поля сам также установлены as display: inline-block;

Это гарантирует, что они не будут полностью блокированы, чтобы очистить и установить другие элементы на новую строку.

Кроме того, удалите все плавающие, так как вы можете достичь того, чего хотите, без плавания. Плавающий будет только усложнять ситуацию на этом этапе.

---

EDIT ------> На основании вашего jsfiddle, вот обновленный один: http://jsfiddle.net/sty7gbnh/1/

Есть наценки/отступы вокруг вашего полей. Пока вы устанавливаете их как встроенные блоки, вам необходимо удалить их начальные поля/paddings. Например, здания (которые были бы поляками) с разницей в 5 см с каждой стороны создавали бы 10 см разрыва между каждым зданием ... давая вам это неловкое пространство.

---

EDIT ------> При дальнейшем осмотре, я не уверен в том, как мы можем достичь этого только с помощью CSS и может предложить только с помощью JQuery:

fs = $("fieldset"); 
for (i = 0; i < fs.length; i++) { 
    var that = $(fs[i]); 
    var fieldsetContent = that.html(); 
    that.replaceWith(''+fieldsetContent+''); 
}; 

выше код заменит все наборы полей ничем (поэтому удалит поля) и оставит только поля ввода. Это можно отредактировать для задания определенной области/контейнера.