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属性的类dropdown-list。

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

现在，如果你需要一个具有相同大小的div，你必须在css上设置这个宽度或者使用javascript来动态。

如果您想直接在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

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

然后摆脱

input, span {
    display: block;
}

如果您希望两个元素彼此相邻，则不能将它们作为块元素而不浮动它们。块元素总是带有＆＃34;换行符＃34;最后。

你可以：

将其删除，因此input和span将是内联元素
保留块，但将两个元素浮动到左侧
将它们标记为内联块

添加

看看https://jsfiddle.net/rs659rLh/7/是你尝试实现的目标吗？

您遇到的问题是您坚持使用绝对定位的列表元素。问题是父元素不能支持其绝对定位的子元素中的所有内容。如果子元素大于其父元素，则cnten只会浮动或被切断。因此，您必须定义父元素的尺寸。这是非常不灵活的。我确实设置了：

.container{ width: 200px; }

只是为了展示它是如何运作的。总而言之：你的标记看起来似乎过于复杂，因为你要在这里努力解决这个问题。也许你应该重新考虑整个过程。

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

2 个答案: