微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

请问多个span之间的内容如何对其，谢谢。_html/css_WEB-ITnose

php中文网
发布： 2016-06-21 09:46:40
原创
1758人浏览过

本帖最后由 Javainging 于 2013-10-18 21:02:55 编辑 

	<td class="_table_l" colspan="3"> 													<span><input id="resLongitude" name="reude"  type="text" class="pext01"  hint="测试1" /></span>																		<span><input id="resLatitude" name="resLde"  type="text" class="popups_text01" hint="测试2" /></span>														<div class="search_but"> <a href="#" class="_but" onclick="open()"></div>																		</td>
登录后复制


样式文件如下： 
.search_but{ margin:10px 0 10px 115px; height:22px;}._but{ display:block; line-height:20px; height:20px; float:left; background:url(../images/_butbg02.png) repeat-x; border:1px solid #1a67cb; padding:0 10px; margin-right:10px; color:#FFFFFF;}._but:hover{ background-position:0 -20px; color:#FFFFFF;}
登录后复制


一个td 两个span 一个div
这个div有样式，请问为嘛我的就是对不齐呢，
div的内容跑到这两个text文本框的左边了，而且我把left删掉后，这个div就跑到下面一行去了，
请问怎么对其啊，谢谢。

回复讨论(解决方案)

div和span是有区别的，div本身带有换行，而span是没有的。

对齐？
你要怎么对齐呢
横竖左右

呵呵  总得说清楚把

div是块状元素，独占一行的。
楼主a标签没有写完整,对a标签设置左浮动我不是很明白什么意思。
最好能将整个页面显示的效果截图下来。
至于说跑到左边，你设置的不就是左浮动么？
一个元素浮动之后，就会从原来的父类中抽离出来，父类的high属性就会变小，需要清楚浮动。

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：div从ie6移行到ie9_html/css_WEB-ITnose 下一篇：关于html的 <tbody>的标签问题_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML文本编码格式怎么选_HTML文本编码格式如何选择避免乱码问题 选择UTF-8编码可确保网页正确显示中文等内容，需在HTML中声明，并保证文件保存格式与服务器响应头Content-Type:text/html;charset=UTF-8一致，避免混合或重复声明编码。
2025-11-21 22:01:02
373
HTMLsection标签怎么用_HTMLsection标签的语义与正确使用场景 section标签是HTML中具有语义的结构化标签，用于定义文档中带有明确主题和标题的独立章节，如文章部分、产品模块等，提升可访问性和SEO；每个section应包含h1-h6标题，适用于有逻辑划分的内容区块，但不应仅用于布局或无主题的分组，此时应使用div或其他更合适的标签；与article（独立内容）、div（无语义容器）、aside（侧边相关）不同，section强调内容的组织层次，合理使用可使页面结构清晰，利于用户和搜索引擎理解。
2025-11-21 22:00:52
244
HTML表格单元格合并怎么操作_HTML表格单元格合并如何优化布局结构 使用rowspan和colspan属性可实现HTML表格的单元格合并，1.colspan用于横向合并，使单元格横跨多列，如表头“学生基本信息”占两列；2.rowspan用于纵向合并，让单元格跨越多行，如“一班”合并两行显示；3.建议合理规划布局，避免结构错乱，保持每行总单元格数一致，结合CSS提升样式与可读性，掌握这些技巧能有效优化表格展示效果。
2025-11-21 21:57:38
928
HTML表格怎么语义化替代_HTML传统表格的语义化替代方案与标签使用 应避免在非数据场景使用table标签，如布局排版、用户资料展示或卡片排列，因其导致语义不清、影响可访问性和SEO；推荐用div结合Flexbox或Grid实现布局，用section、article、header等语义标签划分结构，表单类信息可用dl定义列表组织“标题-值”对；仅在呈现二维数据时保留table，并配合caption、thead、tbody、th[scope]等增强语义与可访问性；核心是根据内容本质区分数据与布局，选择恰当标签。
2025-11-21 21:57:02
646
HTML文本自动换行怎么控制_HTML文本自动换行如何根据容器宽度调整 使用CSS控制文本换行可解决长单词溢出问题，通过word-wrap:break-word防止内容溢出，white-space处理空白与换行，word-break控制断词方式，结合响应式设计确保文本在不同容器中合理布局。
2025-11-21 21:56:02
571
HTML表单提交事件怎么监听_HTML表单提交事件的监听与处理方法 最直接的方式是使用JavaScript为表单绑定submit事件监听器。1.使用addEventListener方法在DOM加载后监听表单提交，通过e.preventDefault()阻止默认跳转，可执行验证或AJAX操作。2.也可在HTML中使用onsubmit属性实现内联监听，返回false可取消提交。3.现代开发常结合fetch进行异步提交，利用FormData收集数据，避免页面刷新。4.提交时应进行表单验证，如检查必填项、邮箱格式，错误时提示用户并高亮输入框，同时禁用提交按钮防止重复提交
2025-11-21 21:55:41
702
HTML密码框怎么设置_HTML密码输入框password的用法与安全设置 密码输入框通过type="password"实现内容隐藏，配合label、maxlength、required等属性提升体验与安全，但仅前端遮蔽，真正安全依赖HTTPS传输和后端哈希存储。
2025-11-21 21:54:06
295
HTML5页面可见性API怎么用_HTML5PageVisibilityAPI检测页面可见性的方法 通过document.visibilityState和visibilitychange事件可监听页面可见性，visible表示可见，hidden表示不可见，常用于暂停视频、停止轮询以优化性能。
2025-11-21 21:53:02
1001
HTML表单文件上传怎么实现_HTML文件上传inputfile标签的设置与使用 使用并设置name属性；2.表单必须配置enctype="multipart/form-data"；3.多文件上传添加multiple属性，name设为数组格式；4.前端可添加JS验证确保文件被选择。
2025-11-21 21:52:32
361
HTML布局代码怎么语义化重构_HTML旧代码语义化重构的方法与步骤 首先用语义化标签替换无意义div，提升可读性与SEO；分析结构后，用header、nav、main、article、section、aside、footer等标签明确各区域功能；确保h1唯一且标题层级合理，必要时添加aria-label或role及id；最后验证样式、功能及无障碍兼容性，持续优化代码结构。
2025-11-21 21:35:22
545
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部