子div不在父div内联

Question

我必须做一些愚蠢的事情或看一些显而易见的事情，因为无论我做什么，我都无法在父级内嵌这三个div 。

 .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; } 

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

 .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; } 

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