Question

我在下面举了一个例子，我遇到了麻烦：

<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）添加另一个内div Text 1并将其设为红色矩形，但我不想添加div。

有办法解决这个问题吗？

更新：我更改了正确的链接，并澄清了要求。

Answer 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

Answer 2

您使用此样式代码

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

伪元素将Div插入带有文本的Div

2 个答案: