我有一个人字形的状态栏,每个栏都有很长的文字。在大屏幕上一切都很完美。但在小屏幕文本中会破坏对齐方式和形状。我不需要在手机屏幕上工作,但它在小型笔记本电脑屏幕上也会损坏。
下面是我的摘录,请多多指教。
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 10px;
height: 20px;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
最佳答案
您可能会考虑的一些提示:
您可以调整
填充
以使文本远离边缘。Flex
也可用于居中内容。Vertical-align
可用于行内框
.chevron {
/* flex to align content */
display: inline-flex;
align-items:center;
justify-content:center;
/* end flex update*/
position: relative;
clear: both;
padding: 10px 0 10px 2.5em;/* adjust here side's padding*/
margin:2px 0;/*vertical margins if wrapping ? */
height: 20px;
width: 15%;
vertical-align:middle;
text-align:center;
color: white;
font-size: 12px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
关于html - 我怎样才能使文本在 div 中响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49884532/