html - 在文本的左侧和右侧放置两个箭头
问题描述
我想在下面的代码中的文本周围放置两个箭头(在文本的左侧和右侧):
const contrast = document.getElementById("contrast");
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
@-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
.left-arrow {
position: relative;
}
<div class ="vertical-center-contrast contrast-container">
<span class="left-arrow">›</span>
<p id="contrast" class="contrast"></p>
<span class="right-arrow">‹</span>
</div>
我用箭头的 html 代码创建了两个跨度来创建箭头和内联文本,但没有运气......
解决方案
有多种方法可以做到这一点。最简单的方法是添加display: flex;
到您的vertical-center-contrast
const contrast = document.getElementById("contrast");
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
.contrast-container {
/*overflow: hidden;*/
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
/*position: absolute;*/
/*top: 73.5vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display: flex;
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;
margin: 0 auto;
}
.left-arrow {
position: relative;
}
<div class ="vertical-center-contrast contrast-container">
<span class="right-arrow">‹</span>
<p id="contrast" class="contrast">ddd</p>
<span class="left-arrow">›</span>
</div>
推荐阅读
- excel - Robot Framework:包含 7 行数据的 Excel 数据表。如何从命令行只执行其中一个
- java - 得到
Selenium 中的数据提供程序不匹配错误与 TestNG - oracle - 尝试创建新触发器时出错 - 未正确结束
- javascript - 设置 EJS 项目时出现问题
- java - th:each 在与 bootstrap collapse + spring boot 一起使用时只显示一个项目
- node.js - 无法导入三个 dxf 以在 Angular 中查看 dxf 文件
- node.js - 在极光 postgres 无服务器上连接到不同模式时出错
- nginx - Kubernetes GKE ingress-nginx loki grafana prometheus 设置问题
- java - 一对多映射持久化集合
- typescript - 如何将 v-model 与嵌套对象绑定?