Question

我有一个非常简单的问题。请耐心等待，因为我是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>

但是，如何更改它以使文本出现在进度条后？

谢谢， --Rudy

Answer 1

来自W3schools：

彼此相邻的浮动元素

如果你把几个浮动元素放在一起，它们会   如果有空间则彼此相邻。

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

浮动元素之前的元素不会受到影响。

如果div向左浮动，则会在其周围流动以下文本   正确的

CSS：

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

以下是FIDDLE

Answer 2

基本上，您可以通过以下两种方法来完成此任务。

第一种方法，您可以尝试使用以下代码，让DIV不要在它之前插入换行符，方法是添加display属性。

.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

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

http://www.w3schools.com/cssref/pr_class_display.asp

你可以为它设置一堆价值。

其次，您还可以使用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属性的定义和描述

http://www.w3schools.com/cssref/pr_class_float.asp

我建议你深入研究我发布的那些材料，以便更好地理解这些概念，因为这些对HTML编程非常基础，如果你能先理解它们，它会让你的工作更快。

Answer 3

试试这个

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

Answer 4

对齐.progressbar

中的float:left

DEMO

Answer 5

按如下方式更改css

CSS

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

<强> DEMO

HTML文本位置

5 个答案:

CSS