我想把一个文本元素居中,然后在它旁边加上一个解释性的“这是什么?”。但是当我输入“这是什么?”时,显然会使原始文本元素偏离中心。是否可以使用CSS或HTML来修复这个问题?
position:absolute
样式。这里是一个例子,不需要为任何元素分配宽度。这应该可以很好地处理投入其中的任何文本长度。
http://codepen.io/ay13/pen/GJKawz
HTML和CSS:
h1 {
text-align: center;
}
h1 a {
position: absolute;
margin-left: 10px;
}
<h1>
<span>Centered Text <a href="#">What is this?</a></span>
</h1>
float: right;
width: 100px;
margin-right: -100px;
position: relative;
position: relative
会把它带回来。如果您分享您的代码,那会更好。
但无论如何,您需要将文本定位为相对位置,然后在其中添加解释,并将其定位为绝对位置,下面是清晰明了的代码。
.parent {
width: 80%;
background: lightblue;
display: flex;
justify-content: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
width: 80%;
height: 80px;
background: lightslategrey;
border: 1px solid red;
}
.text {
position: relative;
width: fit-content;
background: lightcoral;
text-align: center;
}
.explanatory {
width: max-content;
position: absolute;
z-index: 10;
color: white;
}
<div class="parent">
<span class="container">
<p class="text">text text text
<span class="explanatory">what is this?</span>
</p>
</span>
</div>
float:left;
。 - Shoeb Mirza