Question

我想确保包含 span 的 div 是 span 的大小，而不管中使用的字体是什么跨度

简单示例：

    .boxName {
        display: block;
        position: relative;
        border: 1px solid yellow;
        min-height: 0%;
    }
    
    span {
        background-color: black;
        color: white;    
        font-size: 1vw;
    }

    <div class="boxName">
     <span>title</span>
    </div>

Demo

如果从 span 中删除 font-size ，您将 div 完全适合 span 。修改 span 的 font-size 会改变 div 的大小，这是不可理解的（对我而言）。

有关如何确保 div 大小为 span 的任何建议吗？

谢谢！马尔钦

Answer 1

将字体大小添加到div而不是span

.boxName {
  display: block;
  position: relative;
  border: 1px solid yellow;
  min-height: 0%;
  font-size: 1vw;
}

span {
  background-color: black;
  color: white;
  
}

<div class="boxName">
  <span>title</span>
</div>

Answer 2

将width:min-content;添加到您的div

.boxName {
    display: block;
    position: relative;
    border: 1px solid yellow;
    min-height: 0%;
    width:min-content;
}

Answer 3

这是因为您在block属性上使用display值。

更改为inline-block：

.boxName {
    display: inline-block;
    position: relative;
    border: 1px solid yellow;
    min-height: 0%;
}

span {
    background-color: black;
    color: white;    
    font-size: 1vw;
}

.boxName {
  display: inline-block;
  position: relative;
  border: 1px solid yellow;
  min-height: 0%;
}

span {
  background-color: black;
  color: white;
  font-size: 1vw;
}

<div class="boxName">
  <span>title</span>
</div>

Answer 4

将display: block;设置为span和width: fit-content;

＆＃13;

.boxName {
    display: block;
    position: relative;
    border: 1px solid yellow;
    min-height: 0%;
}

span {
    width: fit-content;
    background-color: black;
    color: white;
    font-size: 1vw;
    display: block;
}

＆＃13;

<div class="boxName">
 <span>title</span>
</div>

＆＃13;

Answer 5

在方框div上添加display: flex;

 
.boxName {
display: flex;
position: relative;
border: 1px solid yellow;
min-height: 0%;
}

span {
background-color: black;
color: white;    
font-size: 3vw;
}

<div class="boxName">
 <span>title</span>
</div>

Answer 6

将display: flex用于div .boxName，然后它将完美运行。而且也不需要min-height: 0%;

Fiddle

您可以从这里获得更多想法https://stackoverflow.com/a/47439859/3098803

如何确保包含span的div的大小为div

6 个答案: