Question

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

<style>
#shujuchaxun_div{
width: 100%;
height: 30px;
background: 1px solid black;
text-align:center;
float: left;
margin:10px 0px 0px 0px;
border-radius:4px 4px 0 0;
}

#shujuchaxun_div span{
text-align:center;
font-weight: normal;
font: "微软雅黑";
color: #FFFFFF;
width: 100%;
height: 30px;
display:inlie-block;
float: left;
line-height:30px;
white-space: nowrap; /*强制span不换行*/
text-overflow: ellipsis; /*超出部分以点号代替*/
overflow: hidden; /*超出宽度部分隐藏*/
}

#shujuchaxun_div span:nth-child(1) {width: 5%;min-width: 75px;}/*把第n个td的样式*/
#shujuchaxun_div span:nth-child(2) {width: 5%;min-width: 75px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(3) {width: 6%;min-width: 85px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(4) {width: 11%;min-width: 190px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(5) {width: 5%;min-width: 75px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(6) {width: 5%;min-width: 75px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(7) {width: 5%;min-width: 75px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(8) {width: 5%;min-width: 75px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(9) {width: 5%;min-width: 75px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(10){width: 30%;min-width: 200px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(11){width: 8%;min-width: 138px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(12){width: 5%;min-width: 40px; border-left: 1px solid #CCCCCC;}
#shujuchaxun_div span:nth-child(13){width: 5%;min-width: 75px; border-left: 1px solid #CCCCCC;}

</style>
以上是样式；

<div id="shujuchaxun_div" class="navbar-mystyle li-border">
<span>用户编号</span>
<span>用户姓名</span>
<span>电话号码</span>
<span>用户地址</span>
<span>呼叫类型</span>
<span>问题类型</span>
<span>上门服务</span>
<span>是否解决</span>
<span>售后人员</span>
<span>备注</span>
<span>日期</span>
<span>录音文件</span>
<span>记录人</span>
</div>
上面是div中用span作为标题行，为了自动宽度我用的都是百分比，但最后一个“记录人”这个span不显示，不知道为什么求解！
我的div的width: 100%（自动宽度），然后让div中的13个span按百分比分配宽度（并高最小宽度），但第13个span会被挤掉，span的百分比加起来正好是100%

Answer 1

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

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

追问

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

追答

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

追问

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

Answer 2

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宽度不固定