具有绝对位置的父包装器，如何使宽度自动适应内部内容，

Question

http://jsfiddle.net/rs659rLh/5/

如何保持.label标签宽度自动适应里面的内容（在输入旁边制作跨度） 我认为问题是包装器.dropdown-list 设置绝对位置，但我需要那个？我尝试将.dropdown-list 位置左上角右下角设置为零，但仍然不起作用，these 也不起作用...

根据 https://stackoverflow.com/a/7337237/1575921 似乎唯一的方法是设置 position:absolute; 包装器的特定宽度（自动或 100% 都不起作用）

/* config */
ul {
  list-style: none;
}
ul, li {
    margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  word-wrap: break-word;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.clearfix >div, .clearfix >li, .clearfix >span, .clearfix >ul, .clearfix >input {
  float: left;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
input, span {
    display: block;
}
/* end: config */

.dropdown-list {
    background-color: yellow;
}

<ul class="clearfix">
    <li>
        <div class="clearfix">
            <ul>
                <li>top</li>
            </ul>
            <span>icon</span>
        </div>
        <div class="container relative">
            <ul class="dropdown-list absolute">
                <li>
                    <div class="label clearfix">
                        <input type="checkbox" value="{{name}}">
                        <span>{{name................}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>

Answer 1

我不知道你是否看到，但你有两个标签，只有一个是具有 background-color 属性的类下拉列表。

这就是问题所在。如果你想要两个类的背景，你必须在两个类上都放置一个具有背景的类。

现在，如果您需要一个与其他 div 大小相同的 div，则必须在 css 上设置此宽度或使用 javascript 为动态。

---

如果你想直接在label标签上设置背景颜色，你必须直接写在label上，不要span标签，否则，在父标签上设置。

---

HTML：

<ul class="dropdown-list absolute">
                <li>
                    <label class="clearfix label-blue">
                        <input type="checkbox" value="{{name}}">
                        label text
                    </label>
                </li>
            </ul>

CSS：

/* config */
ul {
  list-style: none;
}
ul, li {
    margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  word-wrap: break-word;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}

input, span {
    display: block;
}
/* end: config */

.dropdown-list {
    background-color: yellow;
}

.label-blue {
    background-color: blue;
    padding: 10px;
}
}

Answer 2

从您的 <ul> 中删除 position:absolute。您无需在此处指定任何坐标或尺寸。那为什么是绝对定位呢？

然后摆脱

input, span {
    display: block;
}

如果你想让两个元素相邻出现，你不能让它们都成为块元素而不浮动它们。块元素的末尾总是带有“换行符”。

您可以：

• 别管它，所以input 和span 将是内联元素
• 保留块，但将两个元素都向左浮动
• 如果符合您的目的，请将它们标记为内联块

添加：

看看https://jsfiddle.net/rs659rLh/7/是你想要达到的目标吗？

您遇到的问题是您坚持使用绝对定位的列表元素。问题是父元素不会伸展以容纳其绝对定位的子元素中的所有内容。如果子元素大于其父元素，则 cnten 会浮在上面或被切断。 因此，您必须定义父元素的尺寸。这是相当不灵活的。我确实设置了：

.container{
    width: 200px;    
}

只是为了展示它是如何工作的。总而言之：你的标记对于你在这里想要实现的小东西来说似乎过于复杂了。也许你应该重新考虑整个过程。