在问题中显示内联阻止文本 [英] Display inline block text inside issue
本文介绍了在问题中显示内联阻止文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在尝试显示内联块，如果我不向div中添加任何内容，一切都会很好，但是当我这样做时div崩溃了，我也不知道为什么。
I have been trying out display inline-block, everything worked out great if I didn't add anything into the divs but when I do the div collapsed and I don't know exactly why.
有什么想法吗？
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;
}
推荐答案
问题是由于默认内联元素的垂直对齐– 基线，元素内的文本会影响它，并将div推到底部。例如，使用 vertical-align：top 来抑制此行为。
The issue is due to default vertical alignment of inline elements – baseline, the text inside element affects it and pushes div to the bottom. Use vertical-align: top, for example, to suppress this behavior.
这篇关于在问题中显示内联阻止文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
