在内部显示内联块文本

时间:2015-07-14 21:47:45

标签: html css alignment

我一直在尝试显示内联块,如果我没有在div中添加任何内容,但是当我执行div崩溃并且我不知道确切原因时,一切都很顺利。

有什么想法吗?

https://jsfiddle.net/giancorzo/ebqoptbd/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>8 cajas</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div class="caja"></div>
        <div class="caja-grande">
            <div class="caja inline-block">
                <span>Hola mundo</span>
            </div>
            <div class="caja inline-block">
            </div>
            <div class="caja inline-block">
        CSS:    </div>
        </div>
        <div class="caja inline-block"></div>
        <div class="caja inline-block"></div>
        <div class="caja"></div>
    </body>
</html>

CSS:

.caja{
    background-color: gray;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px;
}

.inline-block{
    display: inline-block;
}

.caja-grande{
    background-color: gray;
    border: 1px solid black;
    padding: 5px;
    width: 350px;
    margin: 5px;
}

3 个答案:

答案 0 :(得分:3)

问题是由于内联元素的默认垂直对齐 - baseline,元素内部的文本会影响它并将div推到底部。例如,使用vertical-align: top来抑制此行为。

JSFiddle

答案 1 :(得分:2)

display:inline-block会产生一个小差距,因此请将font-size:0添加到父级。加上vertical-align:top,因为默认情况下inline-blockbaseline

所有这一切都解决了你的问题。

这是片段:

.caja {
  background-color: gray;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
}
.caja-grande {
  background-color: gray;
  border: 1px solid black;
  padding: 5px;
  width: 350px;
  margin: 5px;
  font-size: 0
}
.inline-block {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}
<div class="caja"></div>
<div class="caja-grande">
  <div class="caja inline-block">
    <span>Hola mundo</span>
  </div>
  <div class="caja inline-block">
  </div>
  <div class="caja inline-block">
  </div>
</div>
<div class="caja inline-block"></div>
<div class="caja inline-block"></div>
<div class="caja"></div>

您可以在本文中找到更多信息(以及如何以其他方式解决此问题的选项)Fighting the Space Between Inline Block Elements

答案 2 :(得分:2)

.inline-block使用.inline-block{ display: inline-block; overflow: hidden; } 来完成这项工作。

{{1}}