gpt4 book ai didi

由于 css 格式,HTML 字体不可点击

转载 作者:太空宇宙 更新时间:2023-11-04 12:30:05 25 4
gpt4 key购买 nike

以下 HMTL 和 CSS 代码生成一个日期选择器。 fa-angle-leftfa-angle-right 是可点击的元素。悬停时,无法单击 fa-angle-left 元素,因为 datepicker-date 的填充位于 fa-angle-left 上方>。我发现了几个关于此的主题,但我似乎无法解决问题:

HTML:

<div class="datepiker-container">
<span class="fa fa-angle-left fa-3x datepicker" {{action "dateBack"}}></span>
<div class="datepicker-date">
<h4 class="datepicker">{{dayOfWeek}}</h4>
<h2 class="datepicker">{{monthDay}}</h2>
<h5 class="datepicker">{{month}} <span style:"font-weight:800">{{year}}</span></h5>
</div>
<span class="fa fa-angle-right fa-3x datepicker" {{action "dateForward"}}></span>
</div>

CSS:

div.datepiker-container {
position: relative;
display: inline-block;
width: 145px !important;
padding: 20px 20px 20px 20px !important;
}

div.datepicker-date {
position: relative;
display: inline-block;
width: 87px !important;
padding: 0px 0px 0px 30px !important;
}


h2.datepicker {
margin: -5px 0px -5px 0px !important;
padding: 0 !important;
font-size: 250%;
font-weight: 100;
letter-spacing: 5px;
color: white;
text-align: center;
width: 45px;
}


h4.datepicker {
margin: 0px 0px 0px 0px !important;
padding: 0 !important;
font-size: 100%;
font-weight: 400;
letter-spacing: 9px;
color: white;
text-transform: uppercase;
text-align: center;
width: 45px;
}


h5.datepicker {
margin: 0px 0px 0px 0px !important;
padding: 0 !important;
font-size: 75%;
font-weight: 400;
letter-spacing: 1px;
color: white;
text-transform: uppercase;
text-align: center;
width: 45px;
}


span.datepicker {
padding: 8px 0px 7px !important;
color: rgba(255,255,255,0.5);
position:absolute;
}

span.datepicker:hover {
padding: 8px 0px 7px !important;
color: rgba(255,255,255,1);
position:absolute;
}

问题:使 fa-angle-left 可点击的正确方法是什么?

谢谢

最佳答案

快速解决方法是将图标置于顶部:

span.datepicker {
padding: 8px 0px 7px !important;
color: rgba(255,255,255,0.5);
position:absolute;
z-index: 1000; /* add this rule */
}

另一种方法是在中心部分使用 margin 而不是 padding:

div.datepicker-date {
position: relative;
display: inline-block;
width: 87px !important;
margin: 0px 0px 0px 30px !important; /* use margin over padding */
}

顺便说一下,您的 HTML 无效:

<span style:"font-weight:800">
^
this should be an equal sign (=)

关于由于 css 格式,HTML 字体不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27730940/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com