CSS：覆盖父级的内联样式宽度以调整为子级宽度[重复]答案

【问题标题】：CSS: Override parent's inline style width to adjust to child width [duplicate]CSS：覆盖父级的内联样式宽度以调整为子级宽度[重复]
【发布时间】：2017-05-19 16:42:15
【问题描述】：

我通常将父级的 .text-container 显示设置为 inline-block 以使宽度与子级 .text 对齐。这里我有一个额外的问题：父母的宽度被硬编码为 element.style。如何覆盖内联样式并同时调整到子宽度？我只能使用 CSS。

https://jsfiddle.net/xc7ybt31/

HTML

 .text {
  display: inline;
}
.text-container {
  display: inline-block;
  float:left;
}
.main-container {
  display: inline-block;
}

<div class="main-container">
  <div class="text-container" style="width:100px">
    <div class="text">
      text
    </div>
  </div>
</div>

【问题讨论】：

您想为子元素应用相同的 100px 还是您的预期结果是什么？
硬编码样式最后由浏览器处理，因此您很可能会被这种样式卡住。但是，您可以在 css 文件中添加一个 !important 语句来覆盖 .text-container 的宽度，但硬编码和 !important 语句都不是最佳做法。

标签： html css

【解决方案1】：

试试这个代码

设置width:auto!important;

.text-container {
    display: inline-block;
    float: left;
    width: auto !important;
}

.text {
  display: inline;
}
.text-container {
  display: inline-block;
  float:left;
  width: auto !important;
}
.main-container {
  display: inline-block;
}

<div class="main-container">
  <div class="text-container" style="width:100px">
    <div class="text">
      text
    </div>
  </div>
</div>

【讨论】：

这就是诀窍——自动宽度和内联块的组合在我的示例中有效。谢谢！

【解决方案2】：

这取决于您的样式声明的specifity，但您只能使用样式表中的!important 声明覆盖内联样式。

【讨论】：

【解决方案3】：

尝试重要的风格转换。

https://jsfiddle.net/ogud9tmj/

.text {
  display: inline-block;
  width: 100%;
  border: 1px solid black;
}
.text-container {
  display: inline-block;
  float:left;
  width: 300px !important;
  border: 1px solid red;
}
.main-container {
  display: inline-block;
  border: 1px solid green;
}

【讨论】：

【解决方案4】：

修改你的css如下：

.text {
      display: inline-block;
      width: 100%;
      background-color: green;
    }

您可以将内联样式的宽度修改为任何值，因此.text 将始终根据您指定的父内联宽度进行调整

.text {
  display: inline-block;
  width: 100%;
  background-color: green;
}
.text-container {
  display: inline-block;
  float:left;
  background-color: yellow;
}
.main-container {
  display: inline-block;
}

<div class="main-container">
  <div class="text-container" style="width:100px">
    <div class="text">
      text
    </div>
  </div>
</div>

【讨论】：

请说明你标记我答案的原因，我的答案符合OP根据父母的宽度调整孩子的要求那么你为什么标记它？
OP 希望父 div 根据其子元素进行调整，而不是相反。父 div 太宽（并且是硬编码），必须与他的小孩子一样大。
我以为他想修改父级的内联宽度，让子级根据自动指定的宽度值进行调整
How do I override the inline style AND adjust to child width at the same time?
不过，您的答案不会影响任何事情，只需将孩子的 witdh 保持在其父母的 100% 上（在每种情况下仅保持 100px）