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

默认情况下，div是一个块级元素，这意味着它会占用整个宽度并导致元素继续在下一行，在它下面......这就是你所看到的。因此，要解决这个问题，您需要更改需要内联的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;}

Answer 2

添加以下CSS：

.dash_data_A, .dash_data_B, .dash_data_C, .title {
  float: left;
}

然后将“output”-stuff包装在div中。

快速JSfiddle，它并不完美，但它有效。你应该让自己完美：）

Answer 3

您也可以简化代码。

<div class="dash_data false"></div>
<div class="dash_data true"></div>
<div class="dash_data false"></div>

.dash_data {
 display: inline;
 //float: left;
}

Answer 4

<强> 1 即可。只使用css的一个选项是

<强> CSS

.dash_data_A, .dash_data_B, .dash_data_C, .title {
    float: left;
}
.false{
    color:red;
}
.true{
    color:Green;
}

DEMO FIDDLE

<强> 2 即可。第二个选择

如果动态生成true，false值，请使用jquery

FIDDLE JS DEMO

<强> JQUERY

var option = "";
$(function () {
    $('.option').each(function () {
        option="";
        option = $(this).html();
         alert(option);
        if (option.trim() == 'true') {
            $(this).addClass('true');
        } else {
            $(this).addClass('false');
        }

    });
});

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

4 个答案: