h5学习笔记：点文并排被挤压

问题前提

最近编写的小程序的时候，当点和文字特别长的时候，会遇到一个点和图文被挤压的现象。看如下。

在css里面编写是如下。样式 dot 里面采取背景填充方式来实现固定宽和高。布局采取flex row 来实现横向布局。其中 item 加了padding 的约束，可以让其偏向左右挤压。

		<div class="list">
			<div class="item">
				<div class="dot"></div>
				<p>我是第一个点我是第一个点我是第一个点我是第一个点</p>
			</div>
			<div class="item">
				<div class="dot"></div>
				<p>我是第二个点我是第二个点我是第二个点我是第二个点</p>
			</div>
		</div>

		*{
			padding: 0;
			margin: 0;
		}
		
		.list{
			width: 400px;
			border: 1px solid red;
		}
		
		.item{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0px 30px;
		}
		.dot{
			width: 20px;
			height: 20px;
			background: black;
			border-radius: 50%;
			margin-right: 10px;
		}

这一切看起来没有什么问题，实际预览的效果会看到圆点的div标签会被挤压的情况发生。样式 class dot 所在div圆点 在固定宽和高的时候，出现挤压现象。在书写样式的时候似乎没预感到会发生这样的问题。

问题处理

尝试改变一下结构，增加一个节点处理。将dot 包在div内，结果会显示正常回来。

<div><div class="dot"></div></div>

	<div class="list">
			<div class="item">
				<div><div class="dot"></div></div>
				<p>我是第一个点我是第一个点我是第一个点我是第一个点</p>
			</div>
			<div class="item">
				<div><div class="dot"></div></div>
				<p>我是第二个点我是第二个点我是第二个点我是第二个点</p>
			</div>
	</div>

这个时候，布局预期就达到我们点文并排的效果。效果也正常回来了。

样式总是会千奇百怪，总是会遇到一些奇奇怪怪的情况。改动一下说不定可以解决问题。至于为什么出现这个现象，这个暂不知道原因。但目前可以采取多一个节点方式处理这个布局问题。