css - CSS !important 不工作宽度子容器

Question

我正在尝试使用其他人创建的标记。我的问题是我已经设置了父容器的宽度以用于其他元素，但想在一个特定的子容器上覆盖它，我可以使用.ticket13 .text b它并将其设置为 400px。但是，这不起作用。

如果你查看这个 jsfiddle你可以看到问题。如何.ticket13 .text b在不更改标记的情况下达到 400 像素宽？

<div class="left-container">
  <div class="ticket13">
    <p class="text">
      <b> I want this container to be 400px wide </b>
    </p>
  </div>
</div>

.ticket13 .text b { width: 400px !important; }

p.text {
  display: inline;
  margin: 5px;
  padding: 0;
}
P.text {
  font-size: 1em;
  font-style: normal;
  margin: 0;
  padding: 0.3em 0.3em 0;
  text-align: left;
  text-indent: 0;
  width: auto;
}


.ticket13 {
  display: inline;
  float: left;
  width: 186px;
}
.ticket13 {
  border: medium none;
  float: left;
  margin: 0;
  padding: 0;
}


.left-container {
  background-color: red;
  float: left;
  text-align: left;
  width: 60%;
}

Answer 1

您必须通过将其设置为或来制作b块级元素。displayblockinline-block

Answer 2

尝试使用：

.ticket13 .text b { width: 400px !important; display: inline-block; }

Answer 3

将孩子的标记放在父标记的下方。你甚至不需要使用!important

Answer 4

为此，您有 2 个解决方案：

.ticket13 .text b {
    width: 400px!important;
    display: block;
}

或者

.ticket13 .text b {
    width: 400px!important;
    float: left;
}