我有一个带有V形状的状态栏,每个栏都有一个长文本。大屏幕都很完美。但在小屏幕文字中打破对齐和形状。我不需要在移动屏幕上工作,但它也会在小型笔记本电脑屏幕上中断。
我的片段在下方,请告诉我。
.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>
答案 0 :(得分:1)
.content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
@media(max-width:768px) {
.content {
flex-flow: wrap;
}
}
.chevron {
width: 100%;
position: relative;
padding: 10px;
height: 20px;
line-height: 20px;
text-align:center;
color: white;
font-size: 12px;
white-space: pre-wrap;
}
.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;
}
&#13;
<div class="content">
<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>
</div>
&#13;
我希望你能找到的东西:)
答案 1 :(得分:1)
如果你对齐元素怎么办?如果你有响应,你可以将它居中,每行只留一个。
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px 0 8px 27px;
height: 20px;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
vertical-align: top;
line-height: 9px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(40deg, 0deg);
-moz-transform: skew(40deg, 0deg);
-ms-transform: skew(40deg, 0deg);
-o-transform: skew(40deg, 0deg);
transform: skew(40deg, 0deg);
border-top-left-radius: 3px;
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-40deg, 0deg);
-moz-transform: skew(-40deg, 0deg);
-ms-transform: skew(-40deg, 0deg);
-o-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
border-bottom-left-radius: 3px;
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
@media all and (max-width:768px){
.chevron {display: block;margin: 5px auto;padding: 8px 9px 12px 30px;}
}
<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>
答案 2 :(得分:1)
.content {
width: calc(100% - 30px);
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}
@media(max-width:768px) {
.content {
flex-flow: wrap;
}
.chevron {
text-align:end;
}
}
.chevron {
width: 100%;
position: relative;
padding: 10px;
min-height: 20px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px 2px;
}
.chevron span {
width: 100%;
margin-left: 25px;
color: white;
text-align: center;
font-size: 12px;
white-space: pre-wrap;
text-transform: capitalize;
}
.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="content">
<div class="chevron"><span>Claim registered</span></div>
<div class="chevron"><span>Awaiting Emails</span> </div>
<div class="chevron"><span>Please Repair; Awaiting repair date </span></div>
<div class="chevron"><span>some lengthiest; status goes</span></div>
<div class="chevron"><span>Invoice Paid</span></div>
</div>
好朋友,这就是这个!
答案 3 :(得分:1)
您可能会考虑一些提示:
您可以调整padding
以使文字远离边缘。
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;
}
&#13;
<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>
&#13;
答案 4 :(得分:0)
是的,样式没有响应,固定的高度和宽度。还可以使用自动换行属性来破坏重叠内容区域中的单词(如果高度固定,则无效)。
查看示例:
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 10px;
/* You can change this to fit the height you want */
height: auto;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
word-wrap: break-word;
}
/* Responsive media query */
@media screen and ( min-width: 992px )
{
.chevron {
max-height: 20px;
}
}