html - Div 与段落不一致

Question

我正在尝试让一个 div 与 <p> 一起显示但由于某种原因，它会在生成时不断跳过。我需要“正常”与“条件是:”出现在同一行，但它出现在下一行。

/* CSS used here will be applied after bootstrap.css */

emergency {
  color: #1D1060;
}

.alert-color {
  color: #0F75BC;
}

.normal {
  color: #6DC2E9;
}

.sys-cond-list ul li span {
  color: #4B5D6B;
}

.sys-cond-list {
  font-size: 12px;
}

#currState {
  color: #3379A3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-10" style="float: left">
    <div class="system-cond" style="position: absolute">
      <p style="text-align: left;">
        Our current<br>condition is: 
         <strong><div id="currState">Normal</div></strong>
      </p>
    
      <p></p>
    </div>
  </div>
</div>
</div>

Answer 1

您可以执行如下操作。您的元素需要一个 float:left;。

虽然有更好的方法来处理这个问题。您真的应该更改 HTML 以使用 span 而不是 div 来实现最终解决方案。

/* CSS used here will be applied after bootstrap.css */emergency{
    color: #1D1060;
}
.alert-color{
    color: #0F75BC;
}
.normal{
    color:#6DC2E9;
}
.sys-cond-list ul li span{
    color: #4B5D6B;
}
.sys-cond-list{
    font-size: 12px;
}
#currState{
    color: #3379A3;
    float:left;
    margin:24px 0 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="row">
                    <div class="col-sm-10" style="float: left">
                        <div class="system-cond" style="position: absolute">

                             <p style="text-align: left;float:left;">Our current<br>condition is: <strong>
                                 </strong></p><div id="currState"><strong>Normal</strong></div><p></p>

                        </div>
                    </div>
                
                </div>
                </div>