html - 如何将 div 内的 span 推到右侧并使此文本响应式

我正在努力制作酒吧技能。我让它创造了一个。但是也有一些问题。

如何让这个跨度向右浮动？我尝试使用 float 没有用。有什么建议吗？每当我试图缩小屏幕时，文本都太小了

* {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;
    
}

<body>
  <div class="bar flex">
  	<div class="bar fill" style="width: 75%">
    	<div class="tag">Javascript</div>
    </div>
    <span class="value">75%</span>
  </div> 

</body>

最佳答案

您已经将同级div的width设置为75%，所以现在您可以使用其他25 % 用于 span 标签，这样它应该填满所有剩余空间。之后，您可以通过 text-align: right 将 span 的文本简单地对齐到右侧。这是一个活生生的例子:

* {
    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;
}

<body>
  <div class="bar flex">
    <div class="bar fill" style="width: 75%">
      <div class="tag">Javascript</div>
    </div>
    <span class="value">75%</span>
  </div> 
</body>

关于html - 如何将 div 内的 span 推到右侧并使此文本响应式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51448254/

html - 如何将 div 内的 span 推到右侧并使此文本响应式

上一篇：css - 修复了未知宽度元素上的菱形剪辑路径？

下一篇：html - 对齐网格列