时间戳

首页 > 解决方案 > 防止html子元素继承父宽度

html - 防止html子元素继承父宽度

问题描述

我有一个带有属性的表单容器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;
}

标签： htmlcss

解决方案

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>

推荐阅读