Внутренний ДИВ плавающая к следующей строке

Question

я экспериментировал с DIV и пытается создать составной элемент управления с помощью

1. Этикетка
2. Текстовое поле

HTML

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.form-control { 
 
    background-color: yellow; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.form-control[data-layoutOrder=horizontal] div[data-section=title] { 
 
    display: inline-block; 
 
    background-color: red; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.form-control div[data-section=data] { 
 
    background-color: green; 
 
    display: inline-block; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="form-control" data-layoutOrder="horizontal"> 
 
    <div data-section="title"> 
 
    <label for="firstName">First Name</label> 
 
    </div> 
 
    <div data-section="data"> 
 
    <input type="text" placeholder="First Name" id="firstName"> 
 
    </div> 
 
</div>

Ожидается, что вывод вышеуказанного кода будет ярлыком, а вход будет смежным, но это не так. Текстовое поле обтекания div фактически плавает до следующей строки, хотя я установил ширину div div и текстового поля div до 50% с помощью CSS.

Я попытался установить отступы, маржинальная т.д., до 0, но ни один из них не работал. Что заставляет текстовое поле div плавать на следующую строку. Когда я изменил одну из ширины div на 49%, оба div были выровнены по одной строке. Я не понял, почему он так себя ведет?

Примечание: Я мог бы получить оба из них рядом друг с другом с использованием свойства float - float:left для метки div & float:right свойство для текстового поля div. Но я хочу знать, почему установка 50% -ной ширины не работала без поплавка. Мне действительно нужно использовать float или я что-то упускаю.

РЕДАКТИРОВАТЬ 1: я нашел другое решение, используя атрибут white-space, как

.form-control { 
background-color: yellow; 
margin:0; 
padding:0; 
white-space:nowrap; 
} 

.form-control div[data-section=data] { 
background-color : green; 
display: inline-block; 
width: 50%; 
margin:0; 
padding:0; 
white-space:normal; 
} 

EDIT 2: Использование flex стиля также желаемого эффекта. При поиске больше, я также натолкнулся на достижение такого же эффекта, используя стиль flex. Обратите внимание, что он не поддерживается в IE 10 и ниже. См. caniuse.

.form-control { 
    background-color: yellow; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    display: -webkit-flex; 
} 
.form-control[data-layoutOrder=horizontal] div[data-section=title] { 
    display: inline-block; 
    background-color: red; 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    flex:1; 
} 
.form-control div[data-section=data] { 
    background-color: green; 
    display: inline-block; 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    flex:1; 
} 

Answer 1

Это сложный вопрос. Элементы встроенных блоков будут считать количество строк в вашем HTML как пространство, добавляя ширину к общей ширине элементов. Чтобы это исправить, добавить пустой HTML комментарий, как это:

<div class="form-control" data-layoutOrder="horizontal"> 
    <div data-section="title"> 
     <label for="firstName">First Name</label> 
    </div><!-- 
    --><div data-section="data"> 
    <input type="text" placeholder="First Name" id="firstName"> 
    </div> 
</div> 

Пример: http://jsfiddle.net/humwrgnj/

Answer 2

Просто напишите теги в одной строке

<div class="form-control" data-layoutOrder="horizontal"> 
    <div data-section="title"> 
    <label for="firstName">First Name</label> 
    </div><div data-section="data"> 
    <input type="text" placeholder="First Name" id="firstName"> 
    </div> 
    </div> 

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.form-control { 
 
background-color: yellow; 
 
margin:0; 
 
padding:0; 
 
} 
 

 
.form-control[data-layoutOrder=horizontal] div[data-section=title]{ 
 
display:inline-block; 
 
background-color : red; 
 
width: 50%; 
 
margin:0; 
 
padding:0; 
 
} 
 

 
.form-control div[data-section=data] { 
 
background-color : green; 
 
display: inline-block; 
 
width: 50%; 
 
margin:0; 
 
padding:0;

<div class="form-control" data-layoutOrder="horizontal"> 
 
<div data-section="title"> 
 
<label for="firstName">First Name</label> 
 
</div><div data-section="data"> 
 
<input type="text" placeholder="First Name" id="firstName"> 
 
</div> 
 
</div>

Answer 3

Add CSS float: left; свойство t его класс .form-control[data-layoutOrder=horizontal] div[data-section=title]

Answer 4

Это хорошо известная проблема с элементами встроенного блока.Хитрость здесь заключается в использовании font-size:0; на вашем элементе контейнера, а затем переопределить это в своих дочерних элементов с помощью font-size:initial;

Вот краткий демо:

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.form-control { 
 
    background-color: yellow; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size:0; 
 
} 
 
.form-control[data-layoutOrder=horizontal] div[data-section=title] { 
 
    display: inline-block; 
 
    background-color: red; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size:initial; 
 
} 
 
.form-control div[data-section=data] { 
 
    background-color: green; 
 
    display: inline-block; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size:initial; 
 
}

<div class="form-control" data-layoutOrder="horizontal"> 
 
    <div data-section="title"> 
 
    <label for="firstName">First Name</label> 
 
    </div> 
 
    <div data-section="data"> 
 
    <input type="text" placeholder="First Name" id="firstName"> 
 
    </div> 
 
</div>

---

В качестве альтернативы следует использовать позиционирование, если элемент всегда будет иметь ширину 50%:

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.parent { 
 
    position: relative; 
 
    min-height: 50px; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: tomato; 
 
} 
 
.childone { 
 
    left: 0; 
 
} 
 
.childtwo { 
 
    lefT: 50%; 
 
    background: cornflowerblue;

<div class="parent"> 
 
    <div class="child childone"></div> 
 
    <div class="child childtwo"></div> 
 
</div>