1

私が問題を抱えている例を以下に示します：

<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。

これを回避する方法はありますか？

更新：正しいリンクを変更し、要件を明確にしました。

4

2 に答える 2

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;
}
​

デモ

于 2012-10-17T08:25:11.700 に答える
0

このスタイルコードを使用します

.text1, .text2{
  width:120px;
  margin:0 auto;
  height:30px;
}
于 2012-10-17T08:14:34.793 に答える