Question

我有一个带有 max-width: 500px 属性的表单容器。在这个容器内，我有一个继承父级宽度的 span 元素。有没有办法防止这种情况？我尝试使用 position: absolute; 并解决了宽度问题，但 HTML 元素重叠。

 <div class="form-container">

        <div class="select"> 
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
          <mat-select>
            <mat-option value="one">First option</mat-option>
            <mat-option value="two">Second option</mat-option>
          </mat-select>
        </div>
....... 
  </div>

.form-container {
   max-width: 500px
}

.select {
   position: absolute;
}

Answer 1

spans 默认是内联元素，不会对 width 设置做出反应（它们和它们的内容一样宽，或者当它们足够宽时，填充它们的父元素） .

但是您可以对其应用 display: inline-block;（或 display: block;），然后为其设置宽度：

.form-container {
  max-width: 500px
}


.select span {
  display: inline-block;
  width: 300px;
}

<div class="form-container">

  <div class="select">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
    <mat-select>
      <mat-option value="one">First option</mat-option>
      <mat-option value="two">Second option</mat-option>
    </mat-select>
  </div>
  .......
</div>

Answer 2

span 元素永远不会继承父元素的宽度（自己），除非你在它上面使用了一些其他的 CSS 属性。这不可能突然发生:)

或者可能是您的父级是 flex 容器，而您在子级上使用了 flex:1;。在这种情况下，子元素会拉伸 :)

防止html子元素继承父宽度

2 个答案: