我一直在尝试创建供稿页面,我希望它能够完全响应。布局是右侧的分数,具有固定的宽度,左侧的链接应占据水平空间的其余部分。
到目前为止,我所拥有的代码只是占用了整条线并在得分div下方传递。
如果链接标题太长以至于它被分数切断,这将是一个问题,因为我无法在链接div的宽度发生碰撞时停止链接div的宽度,在这种情况下我会这样做喜欢使用text-overflow: ellipsis
功能。
我的代码如下,以及jsfiddle链接
HTML
<body>
<ul id="tracklist">
<li class="trackwrap"> <a class="tracklink" href="#">Link 1</a>
<p class="trackscore">x score</p>
</li>
</ul>
</body>
CSS
#tracklist {
margin: 0;
position: relative;
list-style-type: none;
background: white;
padding: 10px 20px 10px 20px;
}
.trackwrap {
position: relative;
margin: 0;
width: 100%;
height: 24px;
transition: 1s;
margin-bottom: 2px;
transition: 1.5s;
}
.tracklink {
background: red;
margin: 0;
display: inline;
position: absolute;
left: 3px;
width: 100%;
max-height: 24px;
font-size: 16px;
line-height: 24px;
}
.trackscore {
background: blue;
margin: 0;
display: inline;
position: absolute;
right: 52px;
font-size: 14px;
color: white;
text-align: right;
line-height: 24px;
}
这需要做出回应,所以如果答案可以使用width: 100%
作为链接div,我会更喜欢它
由于