如何用CSS解决a标签文本换行后未继承margin-left的对齐问题

你遇到的问题是因为.subtext使用了float:left，导致元素脱离正常文档流，后续文本换行时溢出容器范围，无法保持margin-left:100px的缩进效果。以下是几种可行的解决方法：

方法一：移除浮动，改用行内块布局 #

去掉.subtext的浮动属性，改用display:inline-block让元素回到正常文档流，所有文本会在容器的margin-left范围内换行对齐：

.simpletxt {
   display: inline-block;
   margin-left: 100px;
   width: auto;
   height: 100px;
   border: 2px solid #ccc;
   word-wrap: break-word;
}

.subtext{
  display: inline-block;
  margin-right: 8px; /* 可选：给Text1和Text2添加间距 */
}

方法二：为容器设置固定宽度/最大宽度 #

给.simpletxt设置固定或最大宽度，限制文本换行范围，确保内容不会溢出到页面左侧：

.simpletxt {
   display: inline-block;
   margin-left: 100px;
   width: 300px; /* 可按需调整宽度 */
   /* 或使用max-width: 300px; 保持自适应 */
   height: 100px;
   border: 2px solid #ccc;
   word-wrap: break-word;
}

.subtext{
  float:left;
}

方法三：使用Grid布局实现精准对齐 #

如果需要Text1和Text2形成两列布局，让Text2换行后始终对齐自身列的左边缘，可采用Grid布局：

.simpletxt {
   display: inline-block;
   margin-left: 100px;
   width: auto;
   height: 100px;
   border: 2px solid #ccc;
   word-wrap: break-word;
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 8px; /* 可选：两列之间的间距 */
}

.subtext{
  /* 移除float:left */
}

内容的提问来源于stack exchange，提问作者sarann