div后文本移動到下一行
[英]Text moving to next line after div
問題描述
問題詳情
文本在正方形之后移動到下一行。
預期 - 文本應該在正方形之后。
我錯過了什么嗎？
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="chartjsLegend" class="chartjsLegend"> <div style="width:15px;height:15px;background-color:rgb(0, 0, 0)"></div>Q1 - 29.00% <div style="width:15px;height:15px;background-color:rgb(255, 0, 0)"></div>Q2 - 23.78% <div style="width:15px;height:15px;background-color:rgb(0, 255, 0)"></div>Q3 - 19.89% <div style="width:15px;height:15px;background-color:rgb(0, 0, 255)"></div>Q4 - 27.33% </div> </div> </div> </div> </body> </html>
2 個解決方案
解決方案1
0 已采納 2019-11-01 06:30:15
由於div是一個塊元素，它將跨越整個行。 這就是文本轉到下一行的原因。 為了防止這種默認行為，我們需要將 div 的display屬性顯式更改為inline-block 。
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="chartjsLegend" class="chartjsLegend"> <div> <div style="width:15px;height:15px;background-color:rgb(0, 0, 0);display:inline-block;"></div>Q1 - 29.00% </div> <div> <div style="width:15px;height:15px;background-color:rgb(255, 0, 0);display:inline-block;"></div>Q2 - 23.78% </div> <div> <div style="width:15px;height:15px;background-color:rgb(0, 255, 0);display:inline-block"></div>Q3 - 19.89% </div> <div> <div style="width:15px;height:15px;background-color:rgb(0, 0, 255);display:inline-block"></div>Q4 - 27.33% </div> </div> <div class="col-md-6"> <div id="canvas-holder" style="width:200px;"> <canvas id="chart-area" width="100" height="100" /> </div> </div> </div> </div> </body> </html>
解決方案2
0 2019-11-01 06:33:44
在所有div中使用float:left
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="chartjsLegend" class="chartjsLegend"> <div style="width:100%"> <div style="width:15px;height:15px;background-color:rgb(0, 0, 0);float:left"></div> Q1 - 29.00% </div> <div style="width:100%"> <div style="width:15px;height:15px;background-color:rgb(255, 0, 0);float:left"></div>Q2 - 23.78% </div> <div style="width:100%"> <div style="width:15px;height:15px;background-color:rgb(0, 255, 0);float:left"></div>Q3 - 19.89% </div> <div style="width:100%"> <div style="width:15px;height:15px;background-color:rgb(0, 0, 255);float:left"></div>Q4 - 27.33% </div> </div> </div> <div class="col-md-6"> <div id="canvas-holder" style="width:200px;"> <canvas id="chart-area" width="100" height="100" /> </div> </div> </div> </div> </body> </html>
Codepen 鏈接： https://codepen.io/bhavik103/pen/oNNoVLo
HTML Div 將文本移動到下一行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.