Question

我有以下代码：

HTML：

<div class="log">

  <div class="entry">
    <img class="icon" src="https://apixel.me/static/apixel.png" />
    <p class="text">
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
    </p>
  </div>

</div>

CSS：

.log {
    display: inline-block;
    margin-left: 50%;
    transform: translate(-50%, 0);
    border: thin red solid;
}

.entry {
    display: inline-flex;
    height: 25px;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 20px;
    margin-top: 10px;
    border: thin orange solid;
}

.icon {
    display: inline-block;
    width: 25px;
    height: auto;
}

.text {
    display: inline-block;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 15px;
    white-space: nowrap;
    margin: auto;
    margin-left: 15px;
}

.bullet {
    color: #a1a1a1;
    margin-left: 10px;
    margin-right: 10px;
}

JSFiddle demo

在JSFiddle演示中，如果将结果的大小调整为足够宽，则带有红色边框的div不再是其内容的大小。是什么导致这种奇怪的行为，我该如何解决？

Answer 1

尝试将.entry {display: inline-flex;更改为.entry {display: flex;

Answer 2

您可以通过在width: min-content;类中添加此CSS log来解决此问题。 JS Fiddle Link

.log {
    display: inline-block;
    margin-left: 50%;
    transform: translate(-50%, 0);
    border: thin red solid;
    width: min-content;/*Add this line*/
}

.entry {
    display: inline-flex;
    height: 25px;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 20px;
    margin-top: 10px;
    border: thin orange solid;
}

.icon {
    display: inline-block;
    width: 25px;
    height: auto;
}

.text {
    display: inline-block;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 15px;
    white-space: nowrap;
    margin: auto;
    margin-left: 15px;
}

.bullet {
    color: #a1a1a1;
    margin-left: 10px;
    margin-right: 10px;
}

<div class="log">

  <div class="entry">
    <img class="icon" src="https://apixel.me/static/apixel.png" />
    <p class="text">
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
    </p>
  </div>

</div>

CSS-使内容的div宽度（inline-flex div）

2 个答案: