是在絕對定位范圍內而不是在外部渲染文本？
[英]Rendering text inside, not outside, of absolutely positioned span?
問題描述
在以下示例中：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Button</title>
<style type="text/css">
.myline {
background-color: #FFF;
width: 96%;
padding-left: 2%;
padding-right: 2%;
height: 8vh;
padding-top: 0vh;
border-bottom: 0.3vh black;
border-style: none none solid none;
font-size: 0.9em;
line-height: 8vh;
position:relative;
}
span.testbutton {
width: 5em;
height: 1.5em;
display: inline;
position: absolute;
top: 50%;
right: 0;
margin-top: -0.75em;
background-color: #EEE;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="myline">
<span class="testbutton">DO IT</span>
</div>
</body>
</html>
...我希望文本在<span>內部呈現，但這是Firefox 44呈現的方式：
如上圖所示，文本位於<span> 下方 -並非如我所願嗎？
如果我取消position:absolute; 從span.testbutton ，然后文本在里面-但是我也不能使用right:0; 。
如何修復代碼，使文本在跨度內定位？
2 個解決方案
解決方案1
2 2016-02-11 11:16:54
我有兩個解決方案
第一個解決方案
span.testbutton {
background-color: #eee;
display: inline;
font-size: 0.9em;
height: 1.5em;
margin-top: -19px;
padding: 0 0 10px;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 5em;
}
第二解決方案
span.testbutton { text-align: center; line-height: 1.5em; }
解決方案2
1 已采納 2016-02-11 11:12:55
在元素的相同height處添加line-height 。
line-height: 1.5em;
如何使純css浮動工具提示（絕對定位跨度）動態調整大小以適應文本
[英]How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.