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

如何保持？標簽標記寬度自動適應內部內容(使跨度靠近輸入) 我認為問題出在包裝上。下拉列表設置絕對位置，但我需要它。我試著設置。下拉列表位置頂部底部左側右側零但仍然不工作，這些也不工作...

照https://stackoverflow.com/a/7337237/1575921看來唯一的方法是設定位置:絕對；包裝特定寬度(自動或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>

我不知道你是否看到，但你有兩個標簽，只有一個是類下拉列表，它有背景色屬性。

這就是問題所在。如果你想要兩個課程的背景，你必須在兩個課程上都放一個有背景的課程。

現在，如果你需要一個與另一個相同大小的div，你必須在css上設置這個寬度或者使用javascript來動態設置。

如果你想直接在標簽上設置背景色，你必須直接在標簽上寫，不要用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;
}
}

刪除位置:絕對從您的& ltul & gt。您沒有在這里指定任何坐標或尺寸。那么為什么要絕對定位呢？

然后擺脫

input, span {
    display: block;
}

如果你想讓兩個元素相鄰出現，你不能讓它們都成為塊元素而不浮動它們。塊元素總是在末尾帶有一個“換行符”。

您可以:

省去它，這樣輸入和跨度將是內聯元素 保留塊，但將兩個元素都向左浮動 如果這符合您的目的，請將它們標記為內聯塊 添加:

看看https://jsfiddle.net/rs659rLh/7/，這就是你想要達到的目標嗎？

你的問題在于你堅持使用絕對定位的列表元素。問題是，父元素不會擴展到容納其絕對定位的子元素中的所有內容。如果一個子元素比它的父元素大，cnten就會浮在上面或者被截斷。 因此，您必須定義父元素的尺寸。這是非常不靈活的。我確實設定了:

.container{
    width: 200px;    
}

只是為了展示它是如何工作的。總的來說:你的標記對于你在這里想要達到的目標來說似乎太復雜了。也許你應該重新考慮整個過程。