不能使浮动项超过父项的宽度

Question

我无法在CSS上获得想要的效果，只有新闻播报器。如果我使用的位置绝对，链接只显示一次与与的链接已清除。如果使用位置相对，则会获得所需的效果(Marquee)，但如果项目数超过父项的宽度，则项目将分解为第二行。

为了让它与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>

​