时间戳

首页 > 解决方案 > div后文本移动到下一行

html - div后文本移动到下一行

问题描述

问题详情

文本在正方形之后移动到下一行。

预期 - 文本应该在正方形之后。

我错过了什么吗？

JS小提琴链接

<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>

标签： htmltwitter-bootstrap

解决方案

由于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>

推荐阅读