Question

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

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>

Answer 1

试用此代码

设置width:auto!important;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 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;
}

Answer 4

修改你的css如下：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS：覆盖父级的内联样式宽度以调整为子宽度

4 个答案: