Question

我正在尝试对一些状态栏进行编码，但是我似乎无法在同一行上获得文本和相关栏。我使用该属性有些运气，但是当我这样做时，条形图移到了最右端，即使将其向左浮动也是如此。我也尝试了一下，但是没有用。

<h5 class="card-header">Character info</h5>
       <div class="card-body">
          <p>Age:</p>
          <p>County:</p>
          <p>Job:</p>
          <p>Other Stats:</p>

    <div id="container_progressFood">
               <div class="progressFood" style="width: 25%;"> Food:
               <div class="progress-bar bg-danger" 
 role="progressbar"style="height: 20px; width: 75%; float: left" aria-  valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
          </div>
          </div>

Answer 1

我假设您想要在文本右侧显示红色条。我在float:right类元素内联样式上使用了left而不是.progress-bar，并将宽度设置为30:70。尽管它可以在jsfiddle上正常工作，而无需更改宽度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h5 class="card-header">Character info</h5>
       <div class="card-body">
          <p>Age:</p>
          <p>County:</p>
          <p>Job:</p>
          <p>Other Stats:</p>

    <div id="container_progressFood">
               <div class="progressFood" style="width: 30%;float:left;"> Food:
               <div class="progress-bar bg-danger" 
 role="progressbar"style="height: 20px; width: 70%; float: right" aria-  valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
          </div>
          </div>

试图使状态栏与文本内联

1 个答案: