div内容文字自适应

最新推荐文章于 2024-07-03 09:36:39 发布

原创最新推荐文章于 2024-07-03 09:36:39 发布 · 6.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #自适应 #div内容自适应

前端专栏收录该内容

8 篇文章

订阅专栏

本文通过一个简单的HTML和CSS实例展示了如何实现div元素内的文字自适应布局。该示例使用内联样式定义了一个背景为红色的div，并设置其宽度为100%，高度为40像素，文字颜色为黑色，字体大小为20像素，同时采用了内联显示、圆角边框等样式。

神马都不用说了

先来张图

下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.mDiv{
				background-color: red;
				width: 100%;
				height: 40px;
				line-height: 40px;
				color: black;
				font-size: 20px;
				display: inline;
				padding: 10px 15px;
				border-radius: 25px;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="mDiv">
			div里面的文字自适应
		</div>
		<div class="mDiv">
			div里面的文字自适应 div里面的文字自适应 div里面的文字自适应 div里面的文字自适应
		</div>
	</body>
</html>