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>

Answer 2

您的<p>和#currState是块级元素，这意味着它们将占据整个屏幕宽度，因此自然而然地＃34;正常＆＃34;将在下一行。

一个hack修复方法是将两个元素都设置为display: inline-block;，但我认为你的代码可以使用重组。您在不需要时使用内嵌样式和<br>，在css中修改<strong>时使用font-weight标记，您有空<p>标记等。

p {
  display: inline-block;
}
#currState{
  display: inline-block;
}