css - 显示内联 block 以实现此目的的正确方法

标签 css block inline

我有以下CSS行:

.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px; 
}

<h2 class="liquid">Liquid</h2>


它看起来应该像这样:
http://imgur.com/B9vblUP

但是看起来像这样:
http://imgur.com/8RQTkcO

我在这里做错什么,以及如何完全像第一张照片一样得到它?

我尝试了隐藏的溢出,但在块上仅显示25x25的Liquid,其余未显示。

任何帮助深表感谢。

亲切的问候,

麻金布

最佳答案

我认为您应该为橙色正方形创建另一个元素,而不是编辑h2元素的类,因为它将被应用在该元素上的background属性,所以我会做类似的事情:

<div class="liquid"></div>
<h2>Liquid</h2>

.liquid {
  float: left;
  width: 25px;
  height: 25px;
  background: #ff8125;
  margin-right: 15px; 
}


使正方形漂浮在元素的左侧。

关于css - 显示内联 block 以实现此目的的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43468661/

相关文章:

编译器错误 C2059 : syntax error 'type'

css - html在div中居中 Canvas 而不拉伸(stretch) Canvas

Objective-C self->_ivar 访问,显式与隐式 self->

c++ - 通过良好的设计减少缓存未命中

ios - 当我在区 block 中使用“ self ”时没有警告

ruby - 为什么 block 变量是可选的?

html - 为什么我的子子列表不显示内联?

css - 你可以在 CSS 中使用两个 ID 进行选择吗? #content.special #page

html - Div 将无法在移动浏览器上正确显示

html - CSS:在绝对定位的 div 之后有一个 div