Question

我在一些内联阻塞的div中遇到了h1和p元素的问题。

以下代码：

#map-canvas {
  width:    69%;
  height:   1000px;
  display: inline-block;
}
#filter-manager{
  display: inline-block;
  width: 30%;
  height: 1000px;
  background-color: #000000;
  margin: 0;
  padding: 0;
}
#filter-manager h1{
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0;
  display: block;
}

<div id="filter-manager">
  <h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->

div保持其内联状态，但当我放置#filter-manager或p元素时，h1位于底部。如果我不在div中放任何东西就完全对齐了。

为什么h1和p元素的行为如此？

Answer 1

在这种情况下，您有2个解决方案。首先是添加：

#filter-manager {
        float: left;
}

其次是制作h1 table：

#filter-manager h1 {
    display: table;
}

Answer 2

你应该在div中使用display：inline-block添加vertical-align：top;另外，你不需要显示：阻止在h1中，因为默认情况下是h1，h2，h3等。

#map-canvas {
  width:    69%;
  height:   100px;
  display: inline-block;
  background-color:red;
  vertical-align:top
}
#filter-manager{
  display: inline-block;
  width: 30%;
  height: 100px;
  background-color: #000000;
  margin: 0;
  padding: 0;
  vertical-align:top
}
#filter-manager h1{
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0;
  display:block
}

<div id="filter-manager">
  <h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->

Answer 3

尝试更改css文件中h1的显示。

如果这不起作用，请尝试检查margin:0和{{1}}参数，问题肯定在那里。

两个内联块div中的h1和p元素有问题

3 个答案: