Question

我试图将两个div水平地放在一行中。在某些基本搜索中，display:inline应该可以执行此操作。但请参阅以下代码：

<div style="display:inline; ">
    <div  style="line-height:0pt; border:1px solid red" align="left" >
        <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span>
    </div> 
</div> 
<div style="display:inline ">
    <div  style="line-height:0pt;border:1px solid red" align="left" >
        <span style="white-space:pre-wrap;  font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span>
    </div> 
</div>

它将div保持在两个单独的行中，而display:inline-block给出了所需的行为：

<div style="display:inline-block; ">
    <div  style="line-height:0pt; border:1px solid red" align="left" >
        <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span>
    </div> 
</div> 
<div style="display:inline-block">
    <div  style="line-height:0pt;border:1px solid red" align="left" >
        <span style="white-space:pre-wrap;  font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span>
    </div> 
</div>

但我与display:inline-block的问题在于它提供了太多的填充，所以当我希望两条线靠近在一起时，它们之间存在很大差距，这是不可接受的。：内联似乎是要走的路，但它只是不起作用。请解释一下这种行为以及可以采取哪些措施来使其正确......

Answer 1

您应该将display: inline添加到容器和内部div，以重置<div>的默认display block属性。

＆＃13;

div {
  display: inline;
}

＆＃13;

<div>
  <div style="line-height:0pt; border:1px solid red;" align="left">
    <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span>
  </div>
</div>
<div>
  <div style="line-height:0pt;border:1px solid red;" align="left">
    <span style="white-space:pre-wrap;  font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span>
  </div>
</div>

＆＃13;

至于内联块使用，它是白色间距的常见问题：Fighting the Space Between Inline Block Elements

Answer 2

将display:inline;设置为所有div元素，否则你有内联elemnet与块元素child，这将使内联元素colapse（width和height = 0）并显示子属性 - display:block; < / p>

http://codepen.io/anon/pen/GgQzjr

Answer 3

＆＃13;

.bloc_title {
  font-family : Helvetica, sans-serif; 
  font-size : 13px;
}

.bloc {
  display : inline;
  border : solid 1px red;
}

＆＃13;

<div class = "bloc">
  <span class = "bloc_title">
    STATE EMPLOYEES' PPO PLAN
  </div>
</div>
<div class = "bloc">
  <span class = "bloc_title">
    Administrative Services Provided by:
  </span>
  </span>
</div>

＆＃13;

这是你想要的吗？

＆＃39;显示：内联＆＃39;不带两个div

3 个答案: