Question

我正在尝试创建一个div，其宽度根据内部文本而变化。

父div宽度为自动，子div宽度设置为100％，即父div宽度的百分比。

但是父div占据整个页面宽度。如何在动态更改文本长度的同时保持div的最小宽度以使整个文本显示在一行中。

这是实现

.filled-no-icons {
    border-width:0px;
    position:relative;
    padding:0px;
    width:auto;
    height:auto;
    min-width:91px;
    min-height:36px;
    background-color:rgba(0,0,0,0);
}
.filled-no-icons .rectangle-3 {
border-width:1px;
position:absolute;
padding:0px;
width:100%;
height:100%;
min-width:91px;
min-height:36px;
border-radius:4px 4px 4px 4px ;
background-color:rgba(0,150.0,136.0,255);
left:0%;
top:0%;
}
.filled-no-icons .content {
    border-width:0px;
    position:absolute;
    padding:0px;
    width:calc(100% - 32px);
    height:17px;
    min-width:59px;
    min-height:17px;
    background-color:rgba(0,0,0,0);
    left:16px;
    top:calc(50% - 8.5px);
}
.filled-no-icons .content .label {
    border-width:1px;
    position:absolute;
    padding:0px;
    width:calc(100% - 0px);
    height:17px;
    min-width:59px;
    min-height:17px;
    color:rgba(255,255,255,255);
    font-family:Roboto-Medium;
    font-size:14px;
    font-weight:500;
    letter-spacing:0.75px;
    line-height:16.40625px;
    left:0px;
    top:calc(50% - 8.5px);
}

<!DOCTYPE html>
<html>
    <head>
            <title>
                Button test
            </title>
            <meta charset="UTF-8">
    </head>
    <body>
      <div class="filled-no-icons">
        <div class="rectangle-3"></div>
        <div class="content">
          <div class="label">Button</div>
        </div>
      </div>
    </body>
</html>

编辑：添加jsfiddle链接

https://jsfiddle.net/3owturhc/

Answer 1

不太确定为什么将这样的简单设计转换为复杂的HTML / CSS。但通常，您可以将容器设置为 display: inline-block ，因为它具有缩小以适应的功能。下面的示例没有任何标记更改。

请勿将.content设置为绝对位置。好像容器只包含绝对定位的元素，什么都不会折叠，只有给它提供了一定的大小，它才会崩溃为空，但是它不会意识到其中的内容，这意味着盒子的大小不能是动态的。

.filled-no-icons {
  position: relative;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  color: #fff;
}

.filled-no-icons .rectangle-3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: rgba(0, 150, 136, 255);
}

.filled-no-icons .content {
  position: relative; /* increase stacking order */
}

<div class="filled-no-icons">
  <div class="rectangle-3"></div>
  <div class="content">
    <div class="label">Button</div>
  </div>
</div>

<div class="filled-no-icons">
  <div class="rectangle-3"></div>
  <div class="content">
    <div class="label">Lorem ipsum dolor sit amet</div>
  </div>
</div>

Answer 2

添加display：inline-block;到父元素。默认情况下，div具有display：block，它占据整个宽度或整个线条。在下面运行代码，谢谢。

.filled-no-icons {
    border-width:0px;
    position:relative;
    padding:0px;
    width:auto;
    height:auto;
    min-width:91px;
    min-height:36px;
    background-color:rgba(0,0,0,0);
    display:inline-block;
}
.filled-no-icons .rectangle-3 {
border-width:1px;
position:absolute;
padding:0px;
width:100%;
height:100%;
min-width:91px;
min-height:36px;
border-radius:4px 4px 4px 4px ;
background-color:rgba(0,150.0,136.0,255);
left:0%;
top:0%;
}
.filled-no-icons .content {
    border-width:0px;
    position:absolute;
    padding:0px;
    width:calc(100% - 32px);
    height:17px;
    min-width:59px;
    min-height:17px;
    background-color:rgba(0,0,0,0);
    left:16px;
    top:calc(50% - 8.5px);
}
.filled-no-icons .content .label {
    border-width:1px;
    position:absolute;
    padding:0px;
    width:calc(100% - 0px);
    height:17px;
    min-width:59px;
    min-height:17px;
    color:rgba(255,255,255,255);
    font-family:Roboto-Medium;
    font-size:14px;
    font-weight:500;
    letter-spacing:0.75px;
    line-height:16.40625px;
    left:0px;
    top:calc(50% - 8.5px);
}

<!DOCTYPE html>
<html>
    <head>
            <title>
                Button test
            </title>
            <meta charset="UTF-8">
    </head>
    <body>
      <div class="filled-no-icons">
        <div class="rectangle-3"></div>
        <div class="content">
          <div class="label">Button</div>
        </div>
      </div>
    </body>
</html>

子div导致父div占据整个页面宽度

2 个答案: