我正在尝试在css中创建一个“优先级标记”。我有几个问题。 首先:文本根本没有合理居中。 第二:我更喜欢宽度(至少)随着文本的长度动态变化。要么可行吗?
结果:
我对如何选择适合这种情况的字体的理解超出了我目前的CSS技能。如果这已经完成,我真的不想重新发明这个......
.box {
border-color: orange;
border-style: solid;
text-align: center;
border-width: 1px 0px 1px 1px;
margin: 0px 8px 0px 0px;
background-color: yellow;
padding-right: 8px;
position: relative;
height:14px;
width:20px;
}
.arrow {
border-color: transparent transparent transparent orange;
border-style: solid;
border-width: 8px;
position: absolute;
right: -15px;
bottom: -1px;
height:0;
width:0;
}
.arrow2 {
border-color: transparent transparent transparent yellow;
border-style: solid;
border-width: 7px;
position: absolute;
right: -12px;
bottom: 0px;
height:0;
width:0;
}
<div class="{style.box}">42
<div class="{style.arrow}"></div>
<div class="{style.arrow2}"></div>
</div>
答案 0 :(得分:3)
将此添加到.box:
font-size:12px;
font-family:serif;
display:inline-block;
padding-left:5px;
并删除其宽度规则。