代码之家 › 专栏 › 技术社区 › tiberhockey

如何在同一行上对齐彩色文本

css html

tiberhockey · 技术社区 · 3 年前

正如你在下面的图片中看到的,我想把彩色文本和另一个测试放在同一行(平衡旁边)。

我尝试了很多方法,但都没有成功,这是我的html文件

.card-header p {
  color: #668eee;
}

.card {
  max-width: 600px;
  margin: auto;
}

.GreenTextColor {
  color: #33FF3C;
}

.RedTextColor {
  color: red;
}

<div class="container">
  <div class="card">
    <div class="card-header">
      <br> Account: <a href="{% url 'metrix' things.id %}">{{ things.accountid }}</a>
    </div>
    <div class="card-body">
      Balance: &nbsp;&nbsp;&nbsp;&nbsp;End: {{things.enddate}}&nbsp;&nbsp;&nbsp;&nbsp;Result: Not passed {% if things.balance >= 50000 %}
      <div class="GreenTextColor">
        {{things.balance}}
      </div>
      {% else %}
      <div class="RedTextColor">
        {{things.balance}}
      </div>
    </div>
  </div>

1 回复 | 直到 3 年前

Kameron 3 年前

添加 display: flex; 到 .card-body .

.card-header p {
  color: #668eee;
}

.card {
  max-width: 600px;
  margin: auto;
}

.GreenTextColor {
  color: #33FF3C;
}

.RedTextColor {
  color: red;
}

.card-body {
  display: flex;
}

<div class="container">
  <div class="card">
    <div class="card-header">
      <br> Account: <a href="{% url 'metrix' things.id %}">{{ things.accountid }}</a>
    </div>
    <div class="card-body">
      Balance: &nbsp;
      <div class="GreenTextColor">
        {{things.balance}}
      </div>
      <div class="RedTextColor">
        {{things.balance}}
      </div>
    </div>
  </div>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前