Question

我无法在仅限CSS的新闻自动收录器上获得所需的效果。如果我使用绝对位置，只有链接的清除后链接才会显示。如果我使用位置相对，我得到所需的效果（选框），但如果项目数超过父级的宽度，项目将分解为第二行。

我已经尝试了各种各样的事情来使其与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>

无法获得浮动项目超过父级的宽度

1 个答案:

段：