伪元素将高度插入到带有文本的 Div答案

【问题标题】：pseudo-element insert height into Div with text伪元素将高度插入到带有文本的 Div
【发布时间】：2012-10-17 08:03:16
【问题描述】：

我在下面写了一个我遇到问题的例子：

<div class="text1">Text 1</div>
<div class="text2">Text 2</div>

链接：http://jsfiddle.net/qhoc/SQpdu/5/

Text 1 有伪元素，但高度随着伪元素高度调整。

要求：

a. Text 1 高度与Text 2 高度相同

b.按钮中间的红色矩形。

c.文字周围必须有空格

d. 一切都必须是position:relative，至少不是absolute 或fixed，因为这只是一个可以放在任何地方的按钮。

我可以 (a) 删除 padding: 6px 12px; 并添加 height: 30px; 但是我的文本不会在中间有空格，或者 (b) 在 Text 1 中添加另一个内部 div 并制作红色矩形，但我宁愿不添加div。

有没有办法解决这个问题？

更新：我更改了正确的链接并阐明了要求。

【问题讨论】：

标签： html css layout stylesheet pseudo-element

【解决方案1】：

我不知道你到底想要什么，但试试这个可能会有所帮助

.text1, .text2 {
    width: 200px;
    padding: 8px 12px;
    display:block;
    background-color: gray;
    margin: 5px;
    height:20px;
}
.text1{
    height:28px;
   padding:0px 12px 8px 12px;
}
.text1:before {
    content:"";
    background: red;
    display: block;
    position: relative;
    width: 20px;
    height: 10px;
    left: 110px;
    top: 15px;
}

DEMO

【讨论】：

很抱歉给您带来了困惑。我认为我在上一个链接中的 css 代码错误。你能再看看我编辑的问题吗？

【解决方案2】：

你使用这个样式代码

.text1, .text2{
  width:120px;
  margin:0 auto;
  height:30px;
}

【讨论】：