Zenon Zenon -4 years ago 98
CSS Question

CSS: Override parent's inline style width to adjust to child width

I usually set parent's

.text-container
display to inline-block to align the width with the child
.text
. Here I have an additional problem: parents width is hardcoded as element.style. How do I override the inline style AND adjust to child width at the same time? I can only use 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>





Answer Source

Try this code

set 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download