Question

我想准确显示55％

有人可以帮助完成此操作吗？或至少指向正确的方向？

它不能正确显示55％

这是我的代码：

.coupon{
    text-transform: uppercase;	
    color: #444;
    display: inline-block;
    position: relative;
    text-align: right;
    padding: 10px 12px;
    font-size: 20px;
    border: 2px solid #DDD;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
}
.get-code{
    position: absolute;
    left: -2px;
    top: -2px;
    background: #f90;
    color: #FFF;
    padding: 14px 15px 14px 14px;
    font-size: 16px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    transition: all 0.5s ease;
    min-width: 55%;
    text-align: left;
}

.get-code:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 44px solid transparent;
    border-left: 44px solid #f90;
    position: absolute;
    right: -44px;
    top: 0;
}
.get-code:hover{
    padding-right:5px;
    transition:all 0.5s ease
}

<div class="coupon"> <a href="/"> 
<span class="code-text">DFDSEFEF</span> 
<span class="get-code">Get Code</span></a></div>

min-width: 55%;

操作错误

我希望它看起来像

它没有我想要的。我在做什么错了？

Answer 1

我希望这会有所帮助。

.coupon{
    text-transform: uppercase;	
    color: #444;
    display: inline-block;
    position: relative;
    text-align: right;
    padding: 10px 12px;
    font-size: 20px;
    border: 2px solid #DDD;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
}
.get-code{
    position: absolute;
    left: -2px;
    top: -2px;
    background: #f90;
    color: #FFF;
    padding: 14px 15px 14px 14px;
    font-size: 16px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    transition: all 0.5s ease;
    min-width: 45%;
    text-align: left;
}

.get-code:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 44px solid transparent;
    border-left: 44px solid #f90;
    position: absolute;
    right: -44px;
    top: 0;
}
.get-code:hover{
    padding-right:5px !important;
    padding-top: 17px;
    padding-bottom: 16px; 
    padding-left: 5px;
    font-size: 11px;
    transition:all 0.5s ease
}

<div class="coupon"> 
		<a href="/"> 
		<span class="code-text">DFDSEFEF</span> 
		<span class="get-code">Get Code</span></a>
	</div>

Answer 2

这是我的解决方法：
1。填充会影响实际宽度。尝试使用calc。

.get-code{
   padding: 14px 15px 14px 14px;
}

此处左右的填充为15px和14px，因此您的宽度为：

.get-code{
   padding: 14px 15px 14px 14px;
   width: calc(55% - 15px - 14px)
}

2。如果您希望精确55%，请使用width，不要使用min-width

这是完整的代码：

.get-code{
    position: absolute;
    left: -2px;
    top: -2px;
    background: #f90;
    color: #FFF;
    padding: 14px 15px 14px 14px;
    font-size: 16px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    transition: all 0.5s ease;
    width: calc(55% - 15px - 14px)
    text-align: left;
}

但由于宽度不够会打断文本，我的建议是为.coupon元素增加宽度，或减小GET CODE字体大小。

为什么我的CSS星形图层无法正确对齐％？

2 个答案: