Question

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

如果您查看this jsfiddle，则可以看到问题所在。如何在不更改标记的情况下将.ticket13 .text b设置为400px宽？

<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设置为块级元素，方法是将display设置为block或inline-block。

Answer 2

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

Answer 3

尝试使用：

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

Answer 4

要做到这一点，你有2个解决方案：

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

或

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

CSS！重要的是没有工作宽度的子容器

4 个答案: