gpt4 book ai didi

css - 中心向右推

转载 作者:太空宇宙 更新时间:2023-11-03 19:23:59 24 4
gpt4 key购买 nike

我需要将一段文本“main”居中,另一段文本“sub”向右突出。我不希望两者都居中。 “主”居中,右侧为“子”。它不需要在 IE6 中工作。我让它工作了,但文本的底部没有对齐。我应用了样式 bottom:.2em 并且它开始工作了。但我想知道是否有更合乎逻辑的方式来对齐文本的底部。你可以在这里摆弄它link text

更新:如何去掉“main”和“sub”周围的填充?这可能会有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
Main
<div class="sub">&nbsp;(Sub)</div>
</div>
</div>
</body>
</html>

最佳答案

放3个div

*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.left{
float:left;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
float:left;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
float:left;
}
<div class="container">
<div style="float:left">
</div>
<div class="main">
Main
</div>
<div class="sub">&nbsp;(Sub)</div>
</div>

在每个 div 中添加 float:left。

关于css - 中心向右推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1698833/

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