Question

HTML DIV 不换行

网上找过了，都是关于DIV内的文字不换行的说明，但我要的不是这些。

如图，三个进度条外的说明与其对应的进度条不在同一行上，代码如下：

<div align="center">
第一轮操作进度:<div style="position:relative;width:80%;border: 1px solid #B1D632;padding: 1px;" align="left"><div id="progress_main_1" style="display:block;position:relative;background:#B1D632;color:#333333;height:20px;line-height:20px;width:0%;"><span id="progress_text_1" style="position: absolute;width:100%;text-align:center;font-weight:bold;font-size:12px;">0%</span></div></div><br />
第二轮操作进度:<div style="position:relative;width:80%;border: 1px solid #B1D632;padding: 1px;" align="left"><div id="progress_main_2" style="display:block;position:relative;background:#B1D632;color:#333333;height:20px;line-height:20px;width:0%;"><span id="progress_text_2" style="position: absolute;width:100%;text-align:center;font-weight:bold;font-size:12px;">0%</span></div></div><br />
所有操作总进度:<div style="position:relative;width:80%;border: 1px solid #B1D632;padding: 1px;" align="left"><div id="progress_main_0" style="display:block;position:relative;background:#B1D632;color:#333333;height:20px;line-height:20px;width:0%;"><span id="progress_text_0" style="position: absolute;width:100%;text-align:center;font-weight:bold;font-size:12px;">0%</span></div></div><br />
</div>

请问如何才能使三个进度条外的说明与其对应的进度条在同一行上呢？

Answer 1

解决：

1，把文字写在一个div(div1)里，

2，把div1和进度条写入一个div（div2）里，

3，写一个div把这三个div（2）包起来

4，三个子div（2）的样式里面加上浮动，float：left/right

另外：估计进度条的宽度80%太宽，是不可能在同一行上，要改下，先设置10%看效果，然后再调试

Answer 2

<div align="center">
<div style="float:left">第一轮操作进度:</div><div style="position:relative;width:80%;border: 1px solid #B1D632;padding: 1px;" align="left"><div id="progress_main_1" style="display:block;position:relative;background:#B1D632;color:#333333;height:20px;line-height:20px;width:0%;"><span id="progress_text_1" style="position: absolute;width:100%;text-align:center;font-weight:bold;font-size:12px;">0%</span></div></div><br />
<div style="float:left">第二轮操作进度:</div><div style="position:relative;width:80%;border: 1px solid #B1D632;padding: 1px;" align="left"><div id="progress_main_2" style="display:block;position:relative;background:#B1D632;color:#333333;height:20px;line-height:20px;width:0%;"><span id="progress_text_2" style="position: absolute;width:100%;text-align:center;font-weight:bold;font-size:12px;">0%</span></div></div><br />
<div style="float:left">所有操作总进度:</div><div style="position:relative;width:80%;border: 1px solid #B1D632;padding: 1px;" align="left"><div id="progress_main_0" style="display:block;position:relative;background:#B1D632;color:#333333;height:20px;line-height:20px;width:0%;"><span id="progress_text_0" style="position: absolute;width:100%;text-align:center;font-weight:bold;font-size:12px;">0%</span></div></div><br />
</div>

给文字加上div
用style="float:left"来控制他在进度条在左边还是右边float:left是左边
float:right是右边
并且都是在一行

Answer 3

用绝对定位，先给进度条1个position:relative;然后在容器里面加个div给个属性position:absolute;然后用left:xxx; top:xxx;来控制位置

Answer 4

在外面套一个DIV采用左浮动；
<div>
<div style="float:left;width:100px;background:red"></div>第一轮操作
</div>

Answer 5

进度条div里嵌套文字div