Question

我正在尝试提高酒吧技能。我让它创建一个。但是有一些问题。

如何使该跨度向右浮动？我尝试使用float无效。有什么建议吗？每当我尝试缩小屏幕时，文字太小

String

* {box-sizing: border-box}

.flex {
	display: flex;
    margin-bottom: 10pt;
}

.bar { 
	width: 100%;
    background-color: #ccc;
    line-height: 18pt;
}

.fill {
 	background-color: #7ef57e;
}

.tag {
	text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    width: 25%;
    background-color: #00A1A7;
    font-size: 2vw;
    float: left;
    padding-left: 1%;
}

span.value {
    float: right;
    font-size: 2vw;
    z-index: 1;
    
}

Answer 1

您已经将width的{{1}}设置为div，并且级别相同，因此现在您可以将其他75%用作25%标签，这样，它应该会填充所有剩余空间。然后，您可以简单地通过span将span的文本对齐到右侧。这是一个实时示例：

text-align: right

* {
    box-sizing: border-box
}

.flex {
    display: flex;
    margin-bottom: 10pt;
}

.bar { 
    width: 100%;
    background-color: #ccc;
    line-height: 18pt;
}

.fill {
    background-color: #7ef57e;
}

.tag {
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    width: 25%;
    background-color: #00A1A7;
    font-size: 2vw;
    float: left;
    padding-left: 1%;
}

span.value {
    text-align: right;
    width: 25%;
    font-size: 2vw;
    z-index: 1;
}

如何向右推div内的span并使该文本在响应中

1 个答案: