嘗試讓兩個div顯示在同一行上
阿新 • • 發佈：2019-05-04
hub 排版 doctype ont pre 它的 設置 back left
緣由
摸魚的時候在V2EX上看到一篇帖子，通過JS代碼實現控制臺輸出某網站LOGO，感覺挺有意思的，想將其當網頁元素插入網頁，因此就有了本文。
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>嘗試讓兩個div顯示在同一行上</title> <style> .porn { color: #ffffff; background: #000000; padding:5px 10px; font-size:40px; border-radius:12px 0 0 12px; } .hub { color: #000000; background: #FE9A00; padding:5px 10px; font-size:40px; border-radius:0 12px 12px 0; } </style> </head> <body> <!-- 一個div內嵌套兩個div,設置這兩個被嵌套的 div 的 style 屬性為"float: left;" --> <!-- 此方法一般都會有效的，但不建議這麽做 --> <div style="display: inline;"> <div class="porn" style="float: left;">Porn</div> <div class="hub" style="float: left;">hub</div> <div style="clear:both;"></div> <!-- 清除float效果 --> <!-- div 設置 float之後，如果沒有清除 --> <!-- 則下一個被設置 float 的 div 會根據上一個 float 的 div 的布局進行排版 --> <!-- 而下一個沒設置 float 屬性的 div 則是根據它的前一個元素進行排版。 --> </div> <br /> <!-- 當行內元素處理 --> <div> <div class="porn" style="display: inline;">Porn</div> <div class="hub" style="display: inline;margin-left:-4px;">hub</div> </div> <br /> <!-- table大法好！ --> <table style="margin: 0px;padding: 0px;"> <td style="margin: 0px;padding: 0px;"><div class="porn" style="margin-left: -2px;">Porn</div></td> <td style="margin: 0px;padding: 0px;"><div class="hub" style="margin-left: -2px;">hub</div></td> </table> </body> </html>
嘗試讓兩個div顯示在同一行上