html - 如何根据标签文本长度拉伸(stretch)容器宽度？

Question

我正在尝试实现带有标签和图标的自定义按钮。
问题是，如果标签文本太长，它会溢出。
我的目标是使用 CSS 根据标签文本宽度使按钮响应。

这是我到目前为止设法得到的:jsFiddle

.btn_container{
    position: relative;
    background-color: green;
    height: 40px;
    width: 100px;
}

.btn_label{
    position: relative;
    background-color: red;
    width: 70%;
    height: 100%;
    float:left;
}

.btn_icon{
    position: relative;
    background-color: blue;
    width: 30%;
    height: 100%;
    float: right;
}

label{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="btn_container">
  <div class="btn_label">
    <label>Text i want to fit in the div...</label>
  </div>
  <div class="btn_icon">
    <i class="fa fa-plus"></i>
  </div>
</div>

问题是，如果标签文本溢出，“btn_label”和“btn_container”的宽度应该根据标签文本宽度拉伸(stretch)。

我怎样才能做到这一点？

Answer 1

fiddle中你分享的代码有几个问题

1. 如果要拉伸(stretch)父 div ( .btn_container )，为什么要设置 width:100px 呢？使用 width:auto

2. 不要使用 float:left 这会导致元素超出文档的默认流，因此您需要将宽度设置为 btn_container，你不想要的

3. 如果您在文本上使用 position:absolute，其他元素将永远不会考虑它的宽度。因此，如果您希望父级的宽度取决于它的宽度，请避免使用 position:absolute

请参阅下面的解决方案片段或 jsFiddle

.btn_container {
  position: relative;
  background-color: green;
  height: 40px;
  width: auto;
  display: inline-block;
}
.btn_label {
  position: relative;
  background-color: red;
  width: auto;
  height: 100%;
  display: inline-block
}

.btn_icon {
  position: relative;
  background-color: blue;
  width: auto;
  height: 100%;
  display: inline-block;
}

label {}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="btn_container">
  <div class="btn_label">
    <label>Text i want to fit in the div...</label>
  </div>
  <div class="btn_icon">
    <i class="fa fa-plus">+</i>
  </div>
</div>