Question

在下面的代码段中，请注意段落元素实际上比其包装内容更宽。是否可以使段落的宽度与文本宽度完全相等？我不想明确设置p宽度，因为它需要响应。

＆＃13;

div {
  width: 110px;
}

p {
  background-color: #ff0;
}

＆＃13;

<div>
  <p>
    asda sdzxf vzfsdf   asdsdsdsddf dfsdf 
  </p>
  </div>

＆＃13;

编辑：

所以我设法达到了我想要的结果。对不起，如果我对我的问题不够精确。这是：

＆＃13;

div {
  background-color: #f0f;
  width: 10%;
  display: flex;
  align-items: baseline;
}

p {
  background-color: #ff0;
  display: inline;
}

i {
  display: inline-block;
}

＆＃13;

<div>

  <p>
    asda sdzxf vzfsdf asdsdsdsddf dfsdf
  </p>
  <i>icon</i>
</div>

＆＃13;

Answer 1

我不确定您要求的确切内容，如果您在片段中进行预览，我可能会提供帮助。

我认为这是您正在寻找的，但不确定，如果不是，请尝试更好地解释您的要求。

你可能会包含哪个会控制布局/流程

＆＃13;

#container {
  width: 50%;
}

div {
  width: auto;
  display: inline-block;
}

p {
  background-color: #ff0;
}

＆＃13;

<div id="container">
  <div>
    <p>
      asda sdzxf vzfsdf asdsdsdsddf dfsdf asda sdzxf vzfsdf asdsdsdsddf dda sdzxf vzfsdf asdsdsdsddf dfsdf asda sdzxf vzfsdf asdsdsdsddf dfsdf asda sdzxf vzfsdf asdsds
    </p>
  </div>
</div>

＆＃13;

Answer 2

＆＃13;

div {
  width: Auto;
}

p {
  width:Auto !important;
  background-color: #ff0;
}

＆＃13;

<div>
  <p>
    asda sdzxf vzfsdf   asdsdsdsddf dfsdf 
  </p>
  </div>

＆＃13;

使元素的宽度适合包装文本

2 个答案: