在同一基線上對齊不同的字體大小
[英]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.