内部div漂浮到下一行

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包装文本字段实际上是浮动到下一行，但我使用CSS将标签div和textfield div的宽度设置为50％。



我尝试将填充，边距等设置为0，但它们都没有工作。是什么导致textfield div浮动到下一行。当我将其中一个div的宽度更改为49％时，两个div都在单行上对齐。我不明白为什么它表现如此？

注意：我可以使用float属性将它们彼此相邻 - float:left用于标签div＆amp; textfield div的float:right属性。但我想知道为什么设置50％的宽度没有浮动就不起作用。我真的需要使用浮动还是我错过了什么。



编辑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;
}

编辑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

这是一个众所周知的内联块元素问题。这里的诀窍是在容器元素上使用font-size:0;，然后使用font-size:initial;

在子元素中覆盖它

这是一个快速演示：

＆＃13;

＆＃13;

* {
  -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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果元素的宽度总是为50％，则可以选择使用定位：

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

将CSS float: left;属性添加到此类.form-control[data-layoutOrder=horizontal] div[data-section=title]