在同一基线上对齐不同的字体大小
[英]Align different font-sizes on same baseline
问题描述
我想在同一基线上对齐具有不同字体大小的文本。
“ LOREM IPSUM SED”应与“ SEA TAKIMATTA SANNSTUTES ES LOM Ip”位于同一行，并与“ SED NONUMY INVIDUNT UT”和“ NO SEA TAKIMAMATA ESTEST”相同
我已经尝试过了，但没有成功：
这是我当前的代码：
html, body{ width: 100%; height:100%; font-family: Arial, sans-serif; font-size: 1rem; } *{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; } .clearfix::after{ content:""; clear:both; display: block; } .entire-page{ margin: 0 5%; } .header-content > div{ width:100%; padding: 30px 0; } .left{ float:left; } .right{ float: right; } .margin-right-header{ margin-right: 30px; } .left-top{ font-size:1.5rem; font-weight:300; color:#ff0000; } .left-top > span > span{ font-weight:400; } .left-bottom > span{ font-size:0.5rem; font-weight:400; color:#999; } .left-bottom > span > span{ font-weight:400; } .right-top{ font-size:1rem; font-weight:300; color:#ff0000; } .right-bottom{ font-size:1rem; font-weight:300; color:#999; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Titel</title> </head> <body> <div class="entire-page"> <header class="clearfix"> <div> <div class="left"> <div class="left-top"><span><span>LOREM IPSUM</span> SED</span></div> <div class="left-bottom"><span style="vertical-align:baseline;">SED <span>NONUMY</span> INVIDUNT UT</span></div> </div> <div class="right margin-right-header"> <div class="right-top"><span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span></div> <div class="right-bottom"><span style="vertical-align:baseline;">nO SeA TaKiMaTa sAnCtUs eSt</span></div> </div> </div> </header> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2018-01-27 00:24:05
为了应用vertical-align属性，元素需要display: inline-block 。 我在以下代码段中添加了它，但是我重新组织了HTML结构，以便对齐的元素位于同一父元素内。
顺便说一句， vertical-align: baseline是display: inline-block的默认值，因此您甚至不需要编写它display: inline-block仅display: inline-block就足够了。
html, body { width: 100%; height: 100%; font-family: Arial, sans-serif; font-size: 1rem; } * { margin: 0; padding: 0; box-sizing: border-box; } .left-top { font-size: 1.5rem; font-weight: 300; color: #ff0000; } .left-top>span>span { font-weight: 400; } .left-bottom>span { font-size: 0.5rem; font-weight: 400; color: #999; } .left-bottom>span>span { font-weight: 400; } .right-top { font-size: 1rem; font-weight: 300; color: #ff0000; } .right-bottom { font-size: 1rem; font-weight: 300; color: #999; } .top, .bottom { width: 100%; } .top>*, .bottom>* { display: inline-block; width: 46%; }
<div class="entire-page"> <header class="clearfix"> <div class="top"> <div class="left-top"> <span><span>LOREM IPSUM</span> SED</span> </div> <div class="right-top"> <span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span> </div> </div> <div class="bottom"> <div class="left-bottom"> <span>SED <span>NONUMY</span> INVIDUNT UT</span> </div> <div class="right-bottom"> <span>nO SeA TaKiMaTa sAnCtUs eSt</span></div> </div> </header> </div>
将多个浮动跨度与不同字体大小对齐的“干净方法”是什么？
[英]What is the “clean way” to align multiple floating spans with different font-sizes?
为什么这些具有相同样式标签的页面会产生不同的字体大小？
[英]Why are these pages with identical style tags producing different font-sizes?
如果type = text和type = submit的字体大小不同，则搜索表单难看的对齐方式
[英]search form ugly alignment if font-sizes of type=text and type=submit are different
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.