Question

我有以下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，其余部分没有显示。

非常感谢任何帮助。

亲切的问候，

Majin Buu

Answer 1

您正在为想要的结果本身的字体部分设置样式。您应该为橙色方块添加元素或使用pseudo element。这将使您朝着正确的方向前进。

.liquid {
  line-height: 1;
}

.liquid:before {
  background: #ff8125;
  content: ''; /* important for pseudo elements */
  display: inline-block;
  height: .9em;
  margin-right: .45em; 
  position: relative;
  top: .1em;
  width: .9em;
}

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

Answer 2

我认为你应该为橙色方块创建另一个元素，而不是编辑h2元素的类，因为它将应用于该元素的背景属性，所以我会做类似的事情：

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

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

让方块漂浮在元素的左侧。

Answer 3

查看CSS position！

＆＃13;

.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}

h2 {
  position: relative;
  margin-left: 30px; 
}

＆＃13;

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

＆＃13;

Answer 4

Use html like this

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

CSS

.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #ff8125;
    margin-right: 15px; 
    float:left;
    font-size:18px;
}
.bg_white h2{float:left; margin:0px;}

Answer 5

伪元素更适合此解决方案：

h2 {
    background: #eee;
    padding: 5px;
    display:inline-block;
}

.liquid::before {
    content:'';
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    background: #ff8125;
    margin-right: 15px; 
}

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

Answer 6

如果文字很小并且总是在一行中，你可以在CSS下面使用它。

＆＃13;

.liquid {
    display: inline-block;
    padding-left: 10px;
    border-left: 25px solid #ff8125;
    margin-right: 15px;
    font: 25px/25px Arial;
    font-weight: bold;
}

＆＃13;

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

＆＃13;

显示内联块是实现此目的的正确方法

6 个答案: