html中如何让div中的span左浮动前排且不换行

Posted 2023-04-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中如何让div中的span左浮动前排且不换行相关的知识，希望对你有一定的参考价值。

参考技术A 你的span标签不是按照你的百分百写的，实际是百分百+1px,你有边框线的1像素没算，去掉边框线就正常了

看你这样子，是要做一个类似统计、管理的表把，我以我多年前端的经验告诉你，这种还是老老实实的去用表格实现，先不说用其他标签问题多的要死，布局容易乱，自适应也很差，用表格好控制，也不会出现变形等等错误，你用表格需要留各一个格子不定义宽度，自适应就没问题了追问

首先感谢帮助，之前我也是用表格实现的，但标题行无法固定，这个怎么实现

追答

你说的固定，是要让标题这行浮动起来，下拉的时候标题不动是吧？

追问

是的，就是说查出多条信息时标题的这个一行不随滚动条动，固定在第一行上

本回答被提问者和网友采纳参考技术B html结构：
<div class="divBox">
<div class="divList">
<span>123</span><span>45678</span><span>111111</span>
</div>
</div>

css部分:
divBox上设置overflow-x: auto; divList上设置display:table; span上设置display:table-cell;white-space: nowrap;
优势：div宽度不固定，span宽度不固定

div中让内容能不换行就尽量不换行.纯原

div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐.

<html>
    <head>
        <title>九歌·少司命</title>
        <style type="text/css">
          
        </style>
    </head>
    <body>
        <hr/>
        <div style="width:200px"> 
            <span>秋兰兮麋芜，罗生兮堂下；</span>
            <div style="float:right"> 
                |=|
            </div>
            
        </div>
        
        <div style="width:200px"> 
            <span>绿叶兮素华，芳菲菲兮袭予；</span>
            <div style="float:right"> 
                |=|
            </div>
            
        </div>
        <hr/>
    </body>
</html>

效果如下,怎么可以这样子|=|位置错乱了

解决方案一:清除浮动

上面引申出清除浮动问题, 因为有<div>加了float:right的原故,会影响后面<div>的展示效果.

所以我们需要清除浮动. 在<div style="float:right">后加个兄弟级别的<div style="clear:both"></div>

全代码如下(15,23行分别新增):

 1 <html>
 2     <head>
 3         <title>九歌·少司命</title>
 4         <style type="text/css">
 5           
 6         </style>
 7     </head>
 8     <body>
 9         <hr/>
10         <div style="width:200px"> 
11             <span>秋兰兮麋芜，罗生兮堂下；</span>
12             <div style="float:right"> 
13                 |=|
14             </div>
15             <div style="clear:both"></div>
16         </div>
17         
18         <div style="width:200px"> 
19             <span>绿叶兮素华，芳菲菲兮袭予；</span>
20             <div style="float:right"> 
21                 |=|
22             </div>
23             <div style="clear:both"></div>
24         </div>
25         <hr/>
26     </body>
27 </html>

解决方案二:溢出隐藏

在<div style="float:right">给父级别的<div>添加额外样式<div style="width:200px;overflow:hidden"></div>

(在10,18行分别添加了overflow:hidden)

 1 <html>
 2     <head>
 3         <title>九歌·少司命</title>
 4         <style type="text/css">
 5           
 6         </style>
 7     </head>
 8     <body>
 9         <hr/>
10         <div style="width:200px;overflow:hidden"> 
11             <span>秋兰兮麋芜，罗生兮堂下；</span>
12             <div style="float:right"> 
13                 |=|
14             </div>
15             
16         </div>
17         
18         <div style="width:200px;overflow:hidden"> 
19             <span>绿叶兮素华，芳菲菲兮袭予；</span>
20             <div style="float:right"> 
21                 |=|
22             </div>
23             
24         </div>
25         <hr/>
26     </body>
27 </html>