避免换行并更改字体颜色 CSS

Question

我的 HTML 代码如下所示：

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <section class="widget index">
            <header>
                <h4>
                    <i class="fa fa-bars"></i> Status word <small> </small>
                </h4>
            </header>                                           
            <div class="body">
                - Output A: <div class="dash_data_A"></div>
                - Output B: <div class="dash_data_B"></div>
                - Output C: <div class="dash_data_C"></div>

网站上的显示如下：

- Output A:
false
- Output B:
true
- Output C:
false

第一个愿望：输出值应该在同一行（避免换行），如下所示：

- Output A: false
- Output B: true
- Output C: false

第二个愿望：输出值应该改变false（红色）和 true（绿色）的字体颜色。

我必须在 css 文件中实现它吗？还是在js里？或者两者兼而有之？你有什么建议吗？

Answer 1

默认情况下， adiv是块级元素，这意味着它占据整个宽度并导致元素继续在其下方的下一行......这就是您所看到的。因此，要解决此问题，您需要更改需要内联的 div 的显示类型，或者使用默认情况下内联的其他标签，例如span。

.dash_data_A,
.dash_data_B,
.dash_data_C {

    display: inline-block;

}

为了处理颜色部分，我将根据结果应用一个类，如下所示：

<div class="dash_data_A false"></div>
<div class="dash_data_B true"></div>
<div class="dash_data_C false"></div>

然后是CSS：

.true {
    color: green;}

.false {
    color: red;}