css - text-decoration划线的问题
本文介绍了css - text-decoration划线的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这个old价格 我想用一个线划掉,但是只划了数字 不知道为什么没有连那个符号一起划掉。。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
padding: 0 22px;
justify-content: center;
align-items: center;
}
.ticket-wrapper {
background: white;
border-radius: 6px;
border: 1px solid #E1E1E1;
width: 100%;
box-shadow: 0 0 0 1px #E1E1E1;
}
.header {
background: darkgrey;
height: 46px;
line-height: 46px;
border-radius: 6px 6px 0 0;
border-bottom: 1px solid #E1E1E1;
text-align: center;
}
.header .text {
font-size: 15px;
color: black;
opacity: .7;
font-weight: bold;
}
.footer {
border-radius: 0 0 6px 6px;
background: darkgrey;
height: 46px;
line-height: 46px;
border-top: 1px solid #E1E1E1;
text-align: center;
}
.footer .text {
color: #F8AC09;
font-size: 16px;
font-weight: bold;
}
.main ul li {
display: flex;
box-sizing: border-box;
padding: 0 16px;
height: 60px;
justify-content: space-between;
border-bottom: 1px solid #E1E1E1;
}
.main ul li .choice {
flex: auto;
display: flex;
align-items: center;
}
.main ul li .choice .icon {
width: 22px;
height: 22px;
border-radius: 50%;
margin-right: 17px;
border: 1px solid #C6C7C7;
}
.main ul li .choice .desc-wrapper {
/*这里的宽度如果是100%?*/
}
.main ul li .choice .desc-wrapper .desc {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
}
.main ul li .choice .desc-wrapper .info {
font-size: 12px;
color: gainsboro;
}
.main ul li .price {
flex: none;
display: flex;
flex-direction: column;
font-size: 0;
justify-content: center;
}
.main ul li .price .now {
color: #F8AC09;
font-weight: bold;
font-size: 0;
margin-bottom: 8px;
}
.main ul li .price .now .flag {
font-size: 12px;
padding-right: 4px;
}
.main ul li .price .now .num {
font-size: 18px;
}
.main ul li .price .old {
font-size: 0;
color: darkgrey;
text-decoration: line-through;
}
.main ul li .price .old .flag {
font-size: 10px;
padding-right: 4px;
}
.main ul li .price .old .num {
font-size: 14px;
}
.script {
width: 0;
height: 0;
border-right: 10px solid transparent;
border-top: 15px solid #c59c53;
}
</style>
</head>
<body>
<div class="script"></div>
<div class="container">
<div class="ticket-wrapper">
<div class="header">
<span class="text">请选择票券</span>
</div>
<div class="main">
<ul>
<li>
<div class="choice">
<span class="icon"></span>
<div class="desc-wrapper">
<div class="desc">XX的票</div>
<div class="info">还剩10张,没人限购1张</div>
</div>
</div>
<div class="price">
<span class="now"><span class="flag">¥</span><span class="num">21</span></span>
<span class="old"><span class="flag">¥</span><span class="num">211</span></span>
</div>
</li>
</ul>
</div>
<div class="footer">
<span class="text">确定</span>
</div>
</div>
</div>
</body>
</html>
解决方案
看一下.flag的样式中是不是有text-decoration，覆盖了.old的样式。
Update
是字体的问题，放大了看，中间是有一条横线的，由于￥和数字的文本高度不同，所以这两条线没有对齐。
有一个比较笨的解决办法，在
<span class="flag">¥</span>的人民币符号后面加个空格
<span class="flag">¥ </span>CSS部分修改
.main ul li .price .old .flag {
font-size: 10px;
letter-spacing: 4px; /* 用word-spacing制造右侧的间距 */
line-height: 14px;
vertical-align: 1px; /* 让flag竖直方向上向上偏移1px，为了横线对齐 */
}效果：
这篇关于css - text-decoration划线的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
