无法让浮动项目超过父项的宽度

Question

我无法在仅使用 CSS 的新闻行情中获得预期的效果。如果我使用绝对位置，则链接仅在链接的 with 清除后才会显示。如果我使用相对位置，我会得到想要的效果（选框），但是如果项目的数量超过父项的宽度，则项目会分解为第二行。

我已经尝试了各种方法来让它与position:relative 一起工作。我什至试过display:inline-block; white-space:nowrap;。

无论父宽度如何，如何将浮动项目保持在一行？

HTML

Position Absolute<br>
<div id="news-ticker-1" class="marquee-1">
    <span class="news-label">News</span>
    <div class="overflow">
    <a class="item" href="#">First Link</a>
    <a class="item" href="#">Second Link</a>
    <a class="item" href="#">Third Link</a>
    <a class="item" href="#">Fourth Link</a>
    <a class="item" href="#">Fifth Link</a>
    <a class="item" href="#">Sixth Link</a>
    <a class="item" href="#">Seventh Link</a>
    <a class="item" href="#">Eighth Link</a>
    <a class="item" href="#">Ninth Link</a>
    <a class="item" href="#">Tenth Link</a>
    <a class="item" href="#">Eleventh Link</a>
    <a class="item" href="#">Twelfth Link</a>
    </div>
</div>
<br>
<br>
<br>
Position Relative
<div id="news-ticker-2" class="marquee-2">
    <span class="news-label">News</span>
    <div class="overflow">
    <a class="item" href="#">First Link</a>
    <a class="item" href="#">Second Link</a>
    <a class="item" href="#">Third Link</a>
    <a class="item" href="#">Fourth Link</a>
    <a class="item" href="#">Fifth Link</a>
    <a class="item" href="#">Sixth Link</a>
    <a class="item" href="#">Seventh Link</a>
    <a class="item" href="#">Eighth Link</a>
    <a class="item" href="#">Ninth Link</a>
    <a class="item" href="#">Tenth Link</a>
    <a class="item" href="#">Eleventh Link</a>
    <a class="item" href="#">Twelfth Link</a>
    </div>
</div>

CSS

.marquee-1 {
    width: 100%;
    position: relative;
    overflow:hidden;
}
.marquee-1 .overflow {
    position: absolute;
    animation-name: marquee-1;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.marquee-1:hover .overflow {
    animation-play-state: paused;
}
.marquee-1 .item {
    display: block;
    float: left;
}
@keyframes marquee-1 {
    from {
        left: 100%;
    }
    to {
        left: -200%;
    }
}
#news-ticker-1 {
    background: rgba(190, 128, 255, 0.6);
    border-right: 3px solid #BE80FF;
    height: 60px;
}
#news-ticker-1 .news-label {
    background: #BE80FF;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 60px;
    z-index: 2;
    padding: 0 1rem;
    color: #fff;
}
#news-ticker-1 a {
    line-height: 60px;
    padding: 0 1rem;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
}
#news-ticker-1 a:hover {
    background: rgba(0, 0, 0, 0.1);
}
#news-ticker-1 a:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}




.marquee-2 {
    width: 100%;
    position: relative;
    overflow:hidden;
}
.marquee-2 .overflow {
    position: relative;
    animation-name: marquee-2;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.marquee-2:hover .overflow {
    animation-play-state: paused;
}
.marquee-2 .item {
    display: block;
    float: left;
}
@keyframes marquee-2 {
    from {
        left: 100%;
    }
    to {
        left: -200%;
    }
}
#news-ticker-2 {
    background: rgba(190, 128, 255, 0.6);
    border-right: 3px solid #BE80FF;
    height: 60px;
}
#news-ticker-2 .news-label {
    background: #BE80FF;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 60px;
    z-index: 2;
    padding: 0 1rem;
    color: #fff;
}
#news-ticker-2 a {
    line-height: 60px;
    padding: 0 1rem;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
}
#news-ticker-2 a:hover {
    background: rgba(0, 0, 0, 0.1);
}
#news-ticker-2 a:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

JSFIDDLE：http://jsfiddle.net/n6a5uLao/

注意：代码包括小提琴中的两个示例。通过观察小提琴，它会更好地解释问题。

Answer 1

在您的相对位置上：

.marquee-2 .item {
    display: block;
    float: left;
}

改为：

.marquee-2 .item {
    display: table-cell;
    white-space: nowrap;
}

片段：

.marquee-2 {
    width: 100%;
    position: relative;
    overflow:hidden;
}
.marquee-2 .overflow {
    position: relative;
    animation-name: marquee-2;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.marquee-2:hover .overflow {
    animation-play-state: paused;
}
.marquee-2 .item {
    display: table-cell;
    white-space: nowrap;
}
@keyframes marquee-2 {
    from {
        left: 100%;
    }
    to {
        left: -200%;
    }
}
#news-ticker-2 {
    background: rgba(190, 128, 255, 0.6);
    border-right: 3px solid #BE80FF;
    height: 60px;
}
#news-ticker-2 .news-label {
    background: #BE80FF;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 60px;
    z-index: 2;
    padding: 0 1rem;
    color: #fff;
}
#news-ticker-2 a {
    line-height: 60px;
    padding: 0 1rem;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
}
#news-ticker-2 a:hover {
    background: rgba(0, 0, 0, 0.1);
}
#news-ticker-2 a:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

Position Relative
<div id="news-ticker-2" class="marquee-2">
    <span class="news-label">News</span>
    <div class="overflow">
    <a class="item" href="#">First Link</a>
	<a class="item" href="#">Second Link</a>
	<a class="item" href="#">Third Link</a>
	<a class="item" href="#">Fourth Link</a>
	<a class="item" href="#">Fifth Link</a>
	<a class="item" href="#">Sixth Link</a>
	<a class="item" href="#">Seventh Link</a>
	<a class="item" href="#">Eighth Link</a>
	<a class="item" href="#">Ninth Link</a>
	<a class="item" href="#">Tenth Link</a>
	<a class="item" href="#">Eleventh Link</a>
	<a class="item" href="#">Twelfth Link</a>
    </div>
</div>