子div不在父div中内联

Question

我必须做一些愚蠢的事情或者看一些明显的事情，因为无论我做什么，我都无法将这三个div内联到这个父母内部。

＆＃13;

＆＃13;

.stats {
  display: inline-block;
  margin-right: 6px;
  float: right;
  padding: 0;
  font-family: "Roboto" sans-serif;
  color: black;
}
.separator {
  background: rgba(47, 187, 255, 0);
  height: 20px;
  width: 1px;
  vertical-align: middle;
  border-left: solid;
  border-width: 1px;
  border-color: rgba(0, 124, 184, 0.7);
  float: left;
  margin-top: 5px;
  margin-left: 4px;
  margin-right: 4px;
  display: block;
}

＆＃13;

<div class="stats">
  <div class="points"><b>Lorem </b>&nbsp; 142</pdiv>
  <div class="separator"></div>
  <div class="luck"><b>Ipsum</b>&nbsp; 64% <i>Blabla 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我做错了什么？

Answer 1

您需要将display：inline（或inline-block）设置为子项，而不是父项：

.stats {
  display: inline-block;
  margin-right: 6px;
  float: right;
  padding: 0;
  font-family: "Roboto" sans-serif;
  color: black;
}
.stats div {
  display: inline;
}
.separator {
  background: rgba(47, 187, 255, 0);
  height: 20px;
  width: 1px;
  vertical-align: middle;
  border-left: solid;
  border-width: 1px;
  border-color: rgba(0, 124, 184, 0.7);
  margin-top: 5px;
  margin-left: 4px;
  margin-right: 4px;
}

<div class="stats">
  <div class="points"><b>Lorem </b>&nbsp; 142</pdiv>
    <div class="separator"></div>
    <div class="luck"><b>Ipsum</b>&nbsp; 64% <i>Blabla 3</div>
</div>

编辑：我还删除了浮动：左侧分隔符。

Answer 2

将float:left;添加到.stats div-children。

＆＃13;

＆＃13;

.stats {
  display: inline-block;
  margin-right: 6px;
  float: right;
  padding: 0;
  font-family: "Roboto" sans-serif;
  color: black;
}
.stats div{
  float:left;
}
.separator {
  background: rgba(47, 187, 255, 0);
  height: 20px;
  width: 1px;
  vertical-align: middle;
  border-left: solid;
  border-width: 1px;
  border-color: rgba(0, 124, 184, 0.7);
  float: left;
  margin-top: 5px;
  margin-left: 4px;
  margin-right: 4px;
  display: block;
}

＆＃13;

<div class="stats">
  <div class="points"><b>Lorem </b>&nbsp; 142</div>
  <div class="separator"></div>
  <div class="luck"><b>Ipsum</b>&nbsp; 64% <i>Blabla 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;