HTML文本位置

我有一个非常简单的问题。请容忍我，因为我是HTML新手。 在我的index.html中，我创建了一个进度条，现在我希望一个“文本”出现在进度条的后面，但它出现在下一行，而不是进度条的后面

在我的CSS文件中，我有一个进度条类，定义如下：

.progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:5px;
}
.progress {
   background-color:#ff0000;
   height:5px;
   display:inline-block;
}

然后，在我的index.html中，我有如下内容：

<div class="progressBar" id="progressBar2"><div class="progress" id="progress2"></div></div>

我决定在进度条后面放一段文字，我这样做了：

<div class="progressBar" id="progressBar2"><div class="progress" id="progress2"></div></div><div id="myResults">HERE GOES MY TEXT</div>

这是我的文字

但是，如何更改它，使文本显示在进度条之后

谢谢， --鲁迪

像这样试试

   .progressBar { 
     border:1px solid #aaa; 
     color:#fff; 
     width:295px; 
     height:5px;
     float:left;   
   }

---

对齐

浮动：左侧中的
.progressbar

来自：

相邻浮动元素

如果将多个浮动元素放置在彼此之后，它们将
如果有空间的话，可以彼此并排漂浮

浮动元素之后的元素将围绕它流动

浮动元素之前的元素将不受影响

如果一个div向左浮动，下面的文本将围绕它流动，以
右翼

CSS:

这里是
基本上，您可以通过以下两种方法来实现

第一种方法是，通过添加一个display属性，您可以尝试下面的代码，使DIV不在其前面插入换行符

.progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:5px;
   display:inline-block;  ----> Added
}
.progress {
   background-color:#ff0000;
   height:5px;
   display:inline-block;
} 
#myResults {             ----> Added
   display:inline-block; ----> Added
}                        ----> Added

请注意以下URL中不同显示属性的行为：


你可以为它设定很多值


其次，您还可以使用float属性设置浏览器，使其从左到右渲染div，如果左侧有空间，则不使用换行符，使用以下代码

.progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:5px;
   float:left;              -> Added
}
.progress {
   background-color:#ff0000;
   height:5px;
}
#myResults {                -> Added
  float:left;               -> Added
}                           -> Added

您可以在这里参考float属性的定义和描述



我建议你深入阅读我发布的那些材料，以便更好地理解这些概念，因为这些概念对于HTML编程来说非常基本，如果你能先理解它们，你的工作会更快。
如下更改css

CSS
谢谢伙计们，这算是个不错的选择，但我如何对齐它，使“文本”和“条形图”显示在同一行上呢。看起来“酒吧”跳得更高了一点，而且它没有完全居中？！？我明白了，但是即使文本和条在同一条线上，我怎样才能使条稍微低一点（线的中心）@Rudy01:happy to help:）
.progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:5px;
   float:left;              -> Added
}
.progress {
   background-color:#ff0000;
   height:5px;
}
#myResults {                -> Added
  float:left;               -> Added
}                           -> Added

.progressBar {
    border:1px solid #aaa;
    color:#fff;
    width:295px;
    height:5px;
    display:inline-block;
}
.progress {
    background-color:#ff0000;
    height:5px;
}
#myResults
{
    display:inline-block;
}